一、概述
用清晰的層級結構展示資訊，可展開或折疊。
官方網站：https://element.eleme.cn/#/zh-CN/component/tree
二、節點過濾
通過關鍵字過濾樹節點
test.vue
<template>
<div style="width: 20%">
<el-input
placeholder="輸入關鍵字進行過濾"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
:default-expand-all="false"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
ref="tree">
</el-tree>
</div>
</template>
<script>
export default {
// 監聽器
watch: {
filterText(val) {
if (val) {
this.$refs.tree.filter(val)
}else {
this.$refs.tree.filter(null)
}
}
},
methods: {
// 過濾節點
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 點選節點
handleNodeClick(data){
console.log("點選了",data)
},
},
data() {
return {
filterText: '',
data: [{
id: 1,
label: '北京',
parentId:'',
children: [{
id: 4,
label: '海澱',
parentId:1,
children: [{
id: 9,
label: '五道口',
parentId:4,
}, {
id: 10,
label: '中關村',
parentId:4,
}]
}]
}, {
id: 2,
label: '上海',
parentId:'',
children: [{
id: 5,
label: '闵行',
parentId:2,
children: [{
id: 11,
label: '人民廣場',
parentId:5,
}, {
id: 12,
label: '錦江樂園',
parentId:5,
}]
}, {
id: 12,
label: '閘北',
parentId:2,
children: [{
id: 13,
label: '河南北路',
parentId:12,
}, {
id: 14,
label: '武進路',
parentId:12,
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
}
</script>
<style scoped>
</style> View Code
效果如下：
element ui 裡面的tree 自帶的搜尋功能是預設搜尋的全部資料，有關鍵字的顯示，沒有的不顯示。
如上圖，其實闵行下面還有第三層，但是點選，無法展開。實際使用情況，是需要展開的。
是以，搜尋 tree 時，如果非葉子節點裡面含有關鍵字，那麼就顯示此節點下的所有節點，此節點下的所有節點不參與過濾；
解決辦法，增加findSearKey方法，完整代碼如下：
<template>
<div style="width: 20%">
<el-input
placeholder="輸入關鍵字進行過濾"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
:default-expand-all="false"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
ref="tree">
</el-tree>
</div>
</template>
<script>
export default {
// 監聽器
watch: {
filterText(val) {
if (val) {
this.$refs.tree.filter(val)
}else {
this.$refs.tree.filter(null)
}
}
},
methods: {
// 過濾節點
filterNode(value, data, node) {
if (!value) return true;
return this.findSearKey(node, value);
},
//遞歸搜尋父級是否包含關鍵字
findSearKey(node, key) {
// console.log("findSearKey",node, key)
if (node.label.indexOf(key) !== -1) {
return true;
} else {
if (node.parent.parent == null) {
return false;
} else {
return this.findSearKey(node.parent, key);
}
}
},
// 點選節點
handleNodeClick(data){
// console.log("點選了",data)
for (let node of this.data) {
for (let val of node.children) {
if (data.parentId == val.id) {
let text=''
text=node.label+'-'+val.label+'-'+data.label
console.log("選中的三層資料為",text)
}
}
}
},
},
data() {
return {
filterText: '',
data: [{
id: 1,
label: '北京',
parentId:'',
children: [{
id: 4,
label: '海澱',
parentId:1,
children: [{
id: 9,
label: '五道口',
parentId:4,
}, {
id: 10,
label: '中關村',
parentId:4,
}]
}]
}, {
id: 2,
label: '上海',
parentId:'',
children: [{
id: 5,
label: '闵行',
parentId:2,
children: [{
id: 11,
label: '人民廣場',
parentId:5,
}, {
id: 12,
label: '錦江樂園',
parentId:5,
}]
}, {
id: 12,
label: '閘北',
parentId:2,
children: [{
id: 13,
label: '河南北路',
parentId:12,
}, {
id: 14,
label: '武進路',
parentId:12,
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
}
</script>
<style scoped>
</style> 即使比對第二層菜單，也可以展示第三層菜單。
注意一下，以下代碼：
defaultProps: {
children: 'children',
label: 'label'
} 這裡是定義預設的參數字段，上文的資料字典，例如：
{
id: 4,
label: '二級 1-1',
children: [{}]
} 菜單名字用lable表示，子級用children表示。
如果你的資料字典是這樣的
{
code: 2,
description: '一級 2',
children: [{}]
} 那麼defaultProps需要修改為：
defaultProps: {
children: 'children',
label: 'description'
} 是以，defaultProps的參數配置，是根據字典結構來變化的。
注意findSearKey方法，不需要做任何改動，即使資料字典各種變化，它也不需要改動。因為它是根據樹形結構對象來做處理的。
三、預設展開節點
如果需要預設展開第一層節點，可以設定default-expanded-keys參數。
注意：使用default-expanded-keys參數，必須指定node-key參數，用來指定key值。
修改el-tree部分代碼，如下：
<el-tree
class="filter-tree"
node-key="id"
:data="data"
:props="defaultProps"
:default-expanded-keys="[1,2]"
:default-expand-all="false"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
ref="tree">
</el-tree> 這裡的node-key，表示資料字典中的鍵值，default-expanded-keys後面清單中的數值，就是第一層菜單的key，可以寫多個。
預設就會把第一層菜單展開。
本文參考連結：https://blog.csdn.net/crabfrog/article/details/116658938