You can use el-inputcomponents to implement el-treefiltering functionality. For example, you can el-treeput one above el-inputand use the debounce function in the event inputof inputthe filter to implement the filter function. Here is sample code:
<template>
<div>
<el-input
v-model="filterText"
placeholder="请输入搜索内容"
@input="handleInput"
></el-input>
<el-tree
:data="data"
:props="defaultProps"
ref="tree"
@filter-node-method="handleFilterNode"
></el-tree>
</div>
</template>
<script>
import {
debounce } from 'lodash';
export default {
data() {
return {
data: [
{
id: 1,
label: '节点1',
children: []
},
{
id: 2,
label: '节点2',
children: []
},
{
id: 3,
label: '节点3',
children: []
}
],
defaultProps: {
children: 'children',
label: 'label'
},
filterText: ''
};
},
methods: {
// 注意：此处不能使用箭头函数，否则this指向会有问题
handleInput: debounce(function() {
this.$refs.tree.filter(this.filterText);
}, 500),
// 自定义筛选事件
handleFilterNode(value, data, node) {
// ...
}
}
};
</script>
In the above code, we el-treeadded one above el-inputand used v-modela two-way bind filterTextvariable. Then inputuse debouncethe function in the event to implement anti-shake to reduce triggering too many search requests. In the anti-shake function, we call el-treethe filtermethod and pass in filterTextvariables as parameters to realize the filtering function.