第一種（直接展開并高亮關(guān)鍵字）
效果圖這樣的，會(huì)把所有的有這些關(guān)鍵字的節(jié)點(diǎn)都展開
代碼：
這里的邏輯就是通過遞歸循環(huán)把所有和關(guān)鍵字匹配的節(jié)點(diǎn)篩選出來
然后通過setCheckedKeys方法把他展開選中
然后通過filterReal把關(guān)鍵字高亮標(biāo)藍(lán)文章來源：http://www.zghlxwxcb.cn/news/detail-606866.html
<body>
<div id="app" style="padding:10px;">
<!-- 查詢框 -->
<input class="el-textarea__inner" v-model.lazy="title" placeholder="請(qǐng)輸入菜單名稱"
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);//清空節(jié)點(diǎn)選擇，節(jié)點(diǎn)收起
let arr = []
that.openkeys = this.getAllId(arr, this.data2) //遞歸拿到查詢的所有關(guān)鍵字節(jié)點(diǎn)id
that.$refs.tree2.setCheckedKeys(that.openkeys)//根據(jù)這些id展開節(jié)點(diǎn)
}
},
// 遞歸：查詢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) //查詢關(guān)鍵字相同的id添加進(jìn)去
}
if (dataList[i].children) {
keys = this.getAllId(keys, dataList[i].children)
}
}
}
return keys
},
}
})
</script>
<style scoped>
</style>
</html>
第二種（過濾之后再關(guān)鍵字高亮）
這個(gè)是用的官方文檔的那個(gè)過濾方式，可以參考官方文檔看一下。
只不過高亮關(guān)鍵字用這里的
核心寫法和上面一樣，變動(dòng)的只有兩個(gè)地方
1，在tree標(biāo)簽上加上這句話:filter-node-method="filterNode"這個(gè)方法復(fù)制下面的，
只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。
如果是lable就是data.lable。其他的不用動(dòng)
2，差的時(shí)候調(diào)用這個(gè)this.$refs.tree2.filter(this.title);里面的title就是你搜索的值文章來源地址http://www.zghlxwxcb.cn/news/detail-606866.html
<body>
<div id="app" style="padding:10px;">
<!-- 查詢框 -->
<input class="el-textarea__inner" v-model.lazy="title" placeholder="請(qǐng)輸入菜單名稱"
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>
到了這里，關(guān)于【el-tree查詢并高亮】vue使用el-tree組件，搜索展開并選中對(duì)應(yīng)節(jié)點(diǎn)，高亮搜索的關(guān)鍵字，過濾后高亮關(guān)鍵字，兩種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
