vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型
1. 樹(shù)型下拉菜單
實(shí)現(xiàn)效果
2. vue頁(yè)面代碼
引入selectTree組件
import { selectTree } from '@/components' export default { components: { selectTree }, data() { defaultData:{ managementStationId:'1478570186653609986', managementStationName:'瀘彌監(jiān)控中心-安全' } } }
頁(yè)面使用
- returnDropList
樹(shù)型菜單的值
- managementStationId
key值
- defaultData
設(shè)置默認(rèn)值
- treeProps
配置菜單
- @handleNodeClick
選擇事件
<template> <div> <selectTree style="width: 390px" :treeList="returnDropList" nodeKey="managementStationId" :defaultData="defaultData" :treeProps="{ children: 'children', label: 'managementStationName' }" @handleNodeClick="selectDrop" ></selectTree> </div> </template>
3.樹(shù)型數(shù)據(jù)結(jié)構(gòu)
3. selectTree 組件代碼
<template> <el-select class="user-select-tree" v-model="textStr" :placeholder="placeholder" ref="select" :filterable="true" :remote="true" :remote-method="remoteMethod" :clearable="clearable" @clear="clearSelect" @visible-change="visibleChange" :popper-append-to-body="false" style="width: 100%" > <el-option v-model="value" style=" height: 100%; max-height: 200px; overflow-y: auto; padding: 0; background-color: #ffffff; " > <el-tree :data="treeList" :props="treeProps" :filter-node-method="filterNode" :current-node-key="currentKey" highlight-current default-expand-all :node-key="nodeKey" ref="selectTree" :check-strictly="true" @node-click="handleTreeClick" > <span slot-scope="{ data }" :title="data[treeProps.label]" class="ellipsis" > {{ data[treeProps.label] }} </span> </el-tree> </el-option> </el-select> </template> <script> export default { name: 'index', props: { treeList: { type: Array }, //樹(shù)形原始數(shù)據(jù) treeProps: Object, //樹(shù)形配置 nodeKey: String, //樹(shù)形唯一鍵值 defaultSelect: { //默認(rèn)選擇 type: Boolean, default: true }, defaultData: { type: Object, default: null }, clearable: { type: Boolean, default: false }, placeholder: { type: String, default: '請(qǐng)選擇' } }, data() { return { textStr: '', value: '', filterText: '', currentKey: '', highlightNode: -1 } }, watch: { filterText(val) { this.$refs.selectTree.filter(val) }, defaultData(val) { if (this.highlightNode === -1) { this.setEdit(val) } }, treeList(val) { if (val.length > 0) { this.$nextTick(() => { if (this.defaultSelect) { this.value = val[0][this.treeProps.children][0][this.nodeKey] this.textStr = val[0][this.treeProps.children][0][this.treeProps.label] this.highlightNode = this.value this.currentKey = this.value this.$refs.selectTree.setCurrentKey(this.highlightNode) this.$emit('handleNodeClick', this.value) } }) } } }, methods: { setEdit(obj) { if (obj.name !== '' && obj.value !== '') { this.value = obj.value this.textStr = obj.name this.$nextTick(() => { this.highlightNode = this.value this.currentKey = this.value this.$refs.selectTree.setCurrentKey(this.highlightNode) }) } }, visibleChange() { this.filterText = '' }, filterNode(value, data) { if (!value) return true return data[this.treeProps.label].indexOf(value) !== -1 }, remoteMethod(query) { setTimeout(() => { this.filterText = query }, 100) }, // 設(shè)備類型點(diǎn)擊賦值 handleTreeClick(data, checked) { this.filterText = '' if (checked) { // //判斷是否是父子 if ( data[this.treeProps.children] !== undefined && data[this.treeProps.children].length !== 0 ) { this.$refs.selectTree.setCurrentKey(this.highlightNode) } else { this.value = data[this.nodeKey] this.textStr = data[this.treeProps.label] this.$forceUpdate() this.currentKey = this.value this.highlightNode = data[this.nodeKey] this.$emit('handleNodeClick', this.value) this.$refs.selectTree.setCheckedKeys([this.highlightNode]) this.$refs.select.blur() } } }, clearFun() { this.value = '' this.textStr = '' this.currentKey = undefined this.highlightNode = undefined this.$refs.selectTree.setCurrentKey(this.highlightNode) }, clearSelect() { this.value = '' this.textStr = '' this.$refs.selectTree.setCurrentKey() this.$emit('handleNodeClick', '') } } } </script> <style scoped lang="scss"> .user-select-tree { ::v-deep { .el-icon-::before { content: '\ea1b'; font-family: 'icomoon' !important; display: inline-block; -webkit-transform: scale(0.83); font-size: 10px; //width: 100%; //height: 100%; color: #666666; pointer-events: none; } .el-input.is-focus { .el-icon- { transform: rotate(0deg); } } .el-input__inner { height: 36px; line-height: 36px; } .el-input__icon { line-height: 36px; } .el-tree-node__content { height: 32px; } } } </style>
到此這篇關(guān)于vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型的文章就介紹到這了,更多相關(guān)vue 可搜索樹(shù)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對(duì)象,以及變量和對(duì)象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換,需要的朋友可以參考下2022-08-08Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng))
這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03基于Vue3+TypeScript的全局對(duì)象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對(duì)象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對(duì)象的注入和使用,需要的朋友可以參考下2022-09-09解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下2024-03-03前端架構(gòu)vue動(dòng)態(tài)組件使用基礎(chǔ)教程
這篇文章主要為大家介紹了前端架構(gòu)vue動(dòng)態(tài)組件使用的基礎(chǔ)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步早日升職加薪2022-02-02