最初のタイプ (キーワードを直接展開して強調表示する)
効果図では、これらのキーワードを持つすべてのノードが展開されます。
コード:
ここでのロジックは、再帰ループを通じてキーワードに一致するすべてのノードをフィルターで除外し、
setCheckedKeys メソッドを通じて展開して選択し
、filterReal を通じてキーワードを渡すことです。ハイライトブルー
<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>
2 番目のタイプ (フィルタリング後にキーワードが強調表示されます)
これは公式ドキュメントで使用されているフィルタリング方法です。公式ドキュメントを参照して確認してください。
ここでの核となる文言は
強調表示されたキーワードについて上記と同じであり、変更点は 2 つだけです
。 1. この文をツリー タグに追加します: filter-node-method="filterNode" このメソッドは以下にコピーされています
。 data.title をフィールドの名前に変更するだけです。たとえば、フィールドが name の場合、それは data.name です。
lable が data.lable の場合。他のものは移動する必要はありません
2、悪い場合は this.$refs.tree2.filter(this.title) を呼び出します; 中のタイトルは検索した値です
<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>