官网给的例子只能搜索树形图中与关键字匹配的级别:
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2"> </el-tree> <script> export default { watch: { filterText(val) { this.$refs.tree2.filter(val); } }, methods: { filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; } }, data() { return { filterText: '', data2: [{ 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', label: 'label' } }; } }; </script>
使用改进的方法可以搜索出一整条路径:
filterNode(value,data,node) { if(!value){ return true; } let level = node.level; let _array = [];//这里使用数组存储 只是为了存储值。 this.getReturnNode(node,_array,value); let result = false; _array.forEach((item)=>{ result = result || item; }); return result; }, getReturnNode(node,_array,value){ let isPass = node.data && node.data.label && node.data.label.indexOf(value) !== -1; isPass?_array.push(isPass):''; this.index++; console.log(this.index) if(!isPass && node.level!=1 && node.parent){ this.getReturnNode(node.parent,_array,value); } },