<template><div><el-input placeholder="请输入内容" v-model="filterText" clearable></el-input><el-tree :data="treeData" :filter-node-method="filterNode" ref="tree"></el-tree></div>
</template><script>
export default {data() {return {filterText: "",treeData: [{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",},],},],};},//实现输入就进行筛选功能,进行监听该值的变化watch: {filterText(val) {this.$refs.tree.filter(val);},},methods: {// 方法1//因为需要筛选出过滤的父节点以及其所有子节点,只调用element-ui自带的方法只会返回对应的数据,因此需要进行改造筛选条件filterNode(value, data, node) {if (!value) return true;// return data.label.indexOf(value) !== -1;//原有代码 不包含子节点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) : "";if (!isPass && node.level != 1 && node.parent) {this.getReturnNode(node.parent, _array, value);}},// 方法2 速度更快filterNode(value, data, node) {if (!value) return true;// return data.label.indexOf(value) !== -1;//原有代码 不包含子节点let parentNode = node.parent,labels = [node.label],level = 1;while (level < node.level) {labels = [...labels, parentNode.label];parentNode = parentNode.parent;level++;}return labels.some((label) => label.indexOf(value) !== -1);},},
};
</script>
