el-tree树形结构搜索

template div idpopup_tree_input el-input :placeholderplaceholder v-modelfilterText keyup.enter.nativesearchTree /el-input !-- default-expand-all 是否默认展开所有节点 highlight-current 是否高亮当前选中节点 expand-on-click-node 是否在点击节点的时候展开或者收缩节点 默认值为 true如果为 false则只有点箭头图标的时候才会展开或者收缩节点。 accordion 是否每次只打开一个同级树节点展开 filter-node-method 对树节点进行筛选时执行的方法返回 true 表示这个节点可以显示返回 false 则表示这个节点会被隐藏 check-strictly 在显示复选框的情况下是否严格的遵循父子不互相关联的做法默认为 false current-change 当前选中节点变化时触发的事件 -- el-tree stylewidth: 300px; height: 400px; overflow: scroll classselectMultipleClass :datatestData :propsdefaultProps refpopupTree current-changecurrentChangeHandle :default-expand-alldefaultExpandAll :accordionaccordion :highlight-currenthighlightCurrent :expand-on-click-nodetrue check-strictly :filter-node-methodfilterNode /el-tree /div /template script export default { name: PopupTreeInput, props: { data: { type: Array, default: [], }, props: { type: Object, default: {}, }, prop: { type: String, default: , }, nodeKey: { type: String, default: , }, placeholder: { type: String, default: 点击选择内容, }, placement: { type: String, default: bottom, }, defaultExpandAll: { type: Boolean, default: false, }, accordion: { type: Boolean, default: true, }, highlightCurrent: { type: Boolean, default: true, }, currentChangeHandle: { type: Function, default: null, }, }, data() { return { filterText: , testData: [ { id: 1, label: 一级 1, children: [ { id: 4, label: 二级 1-1, children: [ { id: 9, label: 三级 1-1-1, }, { id: 10, label: 三级 1-1-2, }, ], }, ], }, { id: 2, label: 一级 2, children: [ { id: 5, label: 二级 2-1, }, { id: 6, label: 二级 2-2, }, ], }, { id: 3, label: 一级 3, children: [ { id: 7, label: 二级 3-1, }, { id: 8, label: 二级 3-2, }, ], }, ], defaultProps: { children: children, //代表children为子级 name: name, //根据name渲染tree列表 }, } }, watch: { //监听输入框的内容进行搜索 // filterText(val) { // this.$refs.popupTree.filter(val) // }, filterText(val) { if (val.length 0) { this.searchTree() } }, }, methods: { //对树节点进行筛选时执行的方法 // filterNode(value, data) { // console.log(value) // console.log(data) // if (!value) return true // return data.name.indexOf(value) ! -1 // }, currentChangeHandle(e) { console.log(e--, e) }, //searchTree是搜索按钮树形控件自带的搜索筛选方法是一个输入事件所以我这里把输入事件换成了点击事件点击按钮才会触发搜索筛选满足条件的数据 searchTree() { this.$refs.popupTree.filter(this.filterText) }, filterNode(value, data, node) { if (!value) { //如果数据为空则返回true,显示所有的数据项 node.expanded false return true } // 查询列表是否有匹配数据 let val value.toLowerCase() return this.chooseNode(val, data, node) // 调用过滤二层方法 最重要的一个方法 如果运行不了 基本是这个chooseNode方法有出问题 可以仔细 }, // chooseNode中的label是element ui中树形控件的数据结构 如果后端返回的字段不是label 可自行进行更改 chooseNode(value, data, node) { if (data.label.indexOf(value) ! -1) { return true } const level node.level // 如果传入的节点本身就是一级节点就不用校验了 if (level 1) { return false } // 先取当前节点的父节点 let parentData node.parent // 遍历当前节点的父节点 let index 0 while (index level - 1) { // 如果匹配到直接返回 if (parentData.data.label.indexOf(value) ! -1) { return true } // 否则的话再往上一层做匹配 parentData parentData.parent index } // 没匹配到返回false return false }, }, } /script注释解释都在文章中