最近做了一个项目,把SQL服务器,数据库,表的结构呈现在el-tree内,以便作数据表和字段的描述维护。
el-tree获取数据库数据,前端呈现分层后,如何快速的找出一个节点,根据饿了么官方文档,el-tree有一个过滤的功能。 :filter-node-method=”filterNode”。但是此功能在input输入框每次输入一个字符就会立即过滤整个树形结构,导致需要过滤的字符还没有输入完毕,el-tree已经过滤了很多遍,造成卡顿的现象。
比如要在树形结构中过滤包含字符为“Test”的节点,输入T后el-tree就会立即过滤包含T的数据,输入e后第二次过滤包含Te的数据,输入Tes后第三次过滤包含Tes的数据,输入完Test后是第四次过滤。
为此,需要在input输入过滤的同时,在watch内增加延时功能。
<div class="treeheight" style="float:left;overflow:auto;width:30%;border:1px solid">
<el-input :placeholder="this.$t('SQLTreemanage.filterboxdefault')" v-model="filterText"></el-input>
<el-tree
:props="props1"
:load="loadNode1"
@node-click="handlenodeclick"
:lazy="true"
:filter-node-method="filterNode"
:render-content="renderContent"
ref="tree2"
:expand-on-click-node="false"
>
</el-tree>
</div>
const debounce = (function () {
let timer = 0
return function (func, delay) {
clearTimeout(timer)
timer = setTimeout(func, delay)
}
})()
export default {
data () {
filterText: ''
}
}
watch: {
filterText (val) {
debounce(() => {
this.$refs.tree2.filter(val)
}, 1000);
}
通过延时过滤的功能,在input输入字符后,可在设置的延时时间1000(1秒)后进行过滤,减少了整个el-tree过滤的次数。