The first type (directly expand and highlight keywords)
The effect diagram will expand all the nodes with these keywords.
Code:
The logic here is to filter out all the nodes that match the keywords through a recursive loop,
then expand and select them through the setCheckedKeys method
, and then pass the keywords through filterReal Highlight blue
<body>
<div id="app" style="padding:10px;">
<!-- 查询框 -->
<input class="el-textarea__inner" v-model.lazy="title" placeholder="请输入菜单名称"
style="margin-left:10px;width: 220px;" @keyup.enter="getlists"></input>
<!-- 树形菜单 -->
<el-tree :data="data2" node-key="id" :props="defaultProps"
:highlight-current="gaoliang" :default-expanded-keys="openkeys" :default-expand-all="closed"
:show-checkbox='show_checkboxd' ref="tree2">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-html="$options.filters.filterReal(node.label, title)"></span>
</span>
</el-tree>
</div>
</body>
<script type="text/javascript">
let v = new Vue({
el: '#app',
filters: {
filterReal(value, key) {
const ind = value.indexOf(key);
if (value.includes(key))
return (
value
.split("")
.slice(0, ind)
.join("") +
'<span class="key-word">' +
key +
"</span>" +
value
.split("")
.slice(ind + key.length)
.join("")
);
return `<span>${
value}</span`;
},
},
data() {
return {
data2: [],//列表
defaultProps: {
children: 'children',
label: 'title'
},
title: '',//查询
openkeys:[]
}
},
methods: {
getlists() {
// this.$refs.tree2.filter(this.title);
// return
let that = this
if (that.title != '') {
that.openkeys = []
that.$refs.tree2.setCheckedKeys(that.openkeys);//清空节点选择，节点收起
let arr = []
that.openkeys = this.getAllId(arr, this.data2) //递归拿到查询的所有关键字节点id
that.$refs.tree2.setCheckedKeys(that.openkeys)//根据这些id展开节点
}
},
// 递归：查询tree
getAllId(keys, dataList) {
let that=this
if (dataList && dataList.length) {
for (let i = 0; i < dataList.length; i++) {
if(dataList[i].title.includes(that.title)){
keys.push(dataList[i].id) //查询关键字相同的id添加进去
}
if (dataList[i].children) {
keys = this.getAllId(keys, dataList[i].children)
}
}
}
return keys
},
}
})
</script>
<style scoped>
</style>
</html>
The second type (the keyword is highlighted after filtering)
This is the filtering method used in the official document, you can refer to the official document to have a look.
It’s just that the core wording here
is the same as above for the highlighted keywords, and there are only two changes.
1. Add this sentence to the tree tag: filter-node-method="filterNode" This method is copied below,
just need Just change data.title to the name of your field. For example, if your field is called name, it is data.name.
If lable is data.lable. Others do not need to move
2, call this.$refs.tree2.filter(this.title) when it is bad; the title inside is the value you searched for
<body>
<div id="app" style="padding:10px;">
<!-- 查询框 -->
<input class="el-textarea__inner" v-model.lazy="title" placeholder="请输入菜单名称"
style="margin-left:10px;width: 220px;" @keyup.enter="getlists"></input>
<!-- 树形菜单 -->
<el-tree :data="data2" node-key="id" :props="defaultProps"
:highlight-current="gaoliang" :default-expanded-keys="openkeys" :default-expand-all="closed"
:show-checkbox='show_checkboxd' ref="tree2" :filter-node-method="filterNode">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-html="$options.filters.filterReal(node.label, title)"></span>
</span>
</el-tree>
</div>
</body>
<script type="text/javascript">
let v = new Vue({
el: '#app',
filters: {
filterReal(value, key) {
const ind = value.indexOf(key);
if (value.includes(key))
return (
value
.split("")
.slice(0, ind)
.join("") +
'<span class="key-word">' +
key +
"</span>" +
value
.split("")
.slice(ind + key.length)
.join("")
);
return `<span>${
value}</span`;
},
},
data() {
return {
data2: [],//列表
defaultProps: {
children: 'children',
label: 'title'
},
title: '',//查询
openkeys:[]
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.title.indexOf(value) !== -1;
},
getlists() {
this.$refs.tree2.filter(this.title);
},
}
})
</script>