最近需求想要一个树状结构的带搜索功能的目录,要求目录包含搜索文字的高亮,如果父级收起则父级高亮,如果跨级收起 则收起的级别高亮 不限制层级
例如:搜索文字为D,收起C则C高亮, 直接收起A则A高亮
A
B
C
D
代码如下:
HTML代码:
<el-input
v-model="text"
placeholder="搜索"
clearable>
</el-input>
<el-tree
:data="data"
:props="props"
default-expand-all
node-key="id"
highlight-current
ref="tree"
:filter-node-method="filterNode"
@node-collapse="closeNode"
@node-expand='expandNode'
@check="handleCheckChange">
<span slot-scope="{ node }" class="custom-tree-node">
<span v-if="!text">{{ node.label }}</span>
<span v-else-if="nodeArr && nodeArr.indexOf(node.label) > -1" v-html=" `<font style='color:red'>${node.label}</font>`" />
<span v-else-if="text" v-html="node.label.indexOf(text) > -1 ? `<font style='color:red'>${node.label}</font>` : `<font>${node.label}</font>`" />
</span>
</el-tree>
JS代码:
data: {
text: '',
nodeArr: []
}
methods: {
filterNode(value, data, node) {},
// 循环递归
getKeys(data, name) {
if (data.length != 0) {
data.forEach((item) => {
if (item.name.indexOf(this.text) > -1) {
this.nodeArr.push(name);
}
if (this.nodeArr.indexOf(item.name) > -1) {
this.nodeArr.push(data.name);
}
if (item.children != null) {
this.getKeys(item.children, name);
}
});
}
},
// 收起
closeNode(value, data, node) {
if (value.name.indexOf(this.text) == -1) {
this.getKeys(value.children, value.name);
}
},
// 展开
expandNode(value, data, node) {
if (this.nodeArr.indexOf(value.name) > -1) {
this.nodeArr.splice(this.nodeArr.indexOf(value.name), 1);
}
}
}
注意:
1. text清空时记得将nodeArr清空文章来源:https://www.toymoban.com/news/detail-861813.html
2. 这个方法在搜索的时候将树形结构全部展开,如果想要保持原来的结构不变,default-expand-all属性去掉,并在请求时进行循环递归一次 获取高亮的值放入nodeArr中文章来源地址https://www.toymoban.com/news/detail-861813.html
到了这里,关于element UI tree 搜索功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!