El primer tipo (expandir directamente y resaltar palabras clave)
El diagrama de efectos expandirá todos los nodos con estas palabras clave.Código
:
la lógica aquí es filtrar todos los nodos que coincidan con las palabras clave a través de un bucle recursivo,
luego expandirlos y seleccionarlos a través del método setCheckedKeys
, y luego pasar las palabras clave a través de filterReal Resaltar azul
<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>
El segundo tipo (la palabra clave se resalta después del filtrado)
Este es el método de filtrado utilizado en el documento oficial, puede consultar el documento oficial para echar un vistazo.
Es solo que la redacción central aquí
es la misma que la anterior para las palabras clave resaltadas, y solo hay dos cambios:
1. Agregue esta oración a la etiqueta del árbol: filter-node-method="filterNode" Este método se copia a continuación,
solo Solo necesita cambiar data.title al nombre de su campo.Por ejemplo, si su campo se llama nombre, es data.name.
Si etiqueta es data.lable. Otros no necesitan mover
2, llame a this.$refs.tree2.filter(this.title) cuando esté mal, el título dentro es el valor que buscó
<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>