// el-tree
<el-input v-model="filterText" clearable placeholder="输入关键字进行过滤"></el-input>
<el-tree v-loading="filterLoading" v-if='treeShow' :ref="'signallingTreeRef' + inxKey" :check-strictly="true" :data="signallingTreeData" :default-expanded-keys="expandedKeys" :filter-node-method="filterNode" :highlight-current="true" :node-key="nodeKey" :props="defaultProps" show-checkbox @check="selSignallingSure">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span :lev="data.code">{{ node.label }}</span>
</span>
</el-tree>
// 声明的一个延时器,在watch中调用
const debounce = (function () {
let timer = 0
return function (func, delay) {
clearTimeout(timer)
timer = setTimeout(func, delay)
}
})()
// watch
filterText(val) {
this.expands = {};
this.treeShow = false;
this.filterLoading = true;
debounce(() => { // 延时器
this.$refs[this.signallingTreeRef].filter(val.trim()) // el-tree 自身的筛查方法
this.filterLoading = false;
this.changeTreeNodeStatus(this.$refs[this.signallingTreeRef].store.root);
this.expandedKeys = Object.keys(this.expands);
}, 10);
this.treeShow = true;
},
// methods
// 改变节点的状态
changeTreeNodeStatus(node) {
if (!node.isLeaf) {
node.expanded = false;
}
if (node.level === 1) {
node.expanded = true;
}
for (let i = 0; i < node.childNodes.length; i++) {
// 改变节点的自身expanded状态
if (!node.isLeaf) {
node.childNodes[i].expanded = false;
}
if (node.level === 1) {
node.expanded = true;
}
if (node.childNodes[i].childNodes.length > 0) {
this.changeTreeNodeStatus(node.childNodes[i]);
}
}
},
filterNode(value, data, node) {
if (!value) return true;
// return data.name.indexOf(value) !== -1;
return this.chooseNode(value, data, node);
},
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
chooseNode(value, data, node) {
if (data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
if (node.isLeaf) {
this.expands[node.data.id] = 1;
}
return true
}
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回,此处name值是中文字符,enName是英文字符。判断匹配中英文过滤
if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
},
el-tree 树形数据量过大,查询卡顿处理
最新推荐文章于 2024-08-01 21:40:22 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)