element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示。
需求:
搜索 tree 时,如果非叶子节点里面含有关键字,那么就显示此节点下的所有节点,此节点下的所有节点不参与过滤;
html
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
Script
<script>
export default {
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
//筛选结点
filterNode(value, data, node) {
if (!value) return true;
return this.findSearKey(node, value);
},
//递归搜索父级是否包含关键字
findSearKey(node, key) {
if (node.label.indexOf(key) !== -1) {
return true;
} else {
if (nod