一、概述
用清晰的層級結構展示信息，可展開或折疊。
官方網站：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>
效果如下：
element ui 里面的tree 自帶的搜索功能是默認搜索的全部數據，有關鍵字的顯示，沒有的不顯示。
如上圖，其實閔行下面還有第三層，但是點擊，無法展開。實際使用情況，是需要展開的。
因此，搜索 tree 時，如果非葉子節點里面含有關鍵字，那么就顯示此節點下的所有節點，此節點下的所有節點不參與過濾；
解決辦法，增加findSearKey方法，完整代碼如下：
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, 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