目录
- 1.代码实现
- 2. 效果图
- 3. 使用到的部分属性说明
- 4. 更多属性配置查看element官网
1.代码实现
<template>
<div class="TreePage">
<el-row :gutter="20">
<!--村数据-->
<el-col :span="24">
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入名称" clearable size="small" prefix-icon="el-icon-search"
style="margin-bottom: 20px" />
</div>
<!-- 组织树 -->
<div class="head-container">
<el-tree ref="tree" :props="defaultProps" :default-expanded-keys="treeData" :expand-on-click-node="false"
:load="loadNode" lazy node-key="deptId" :filter-node-method="filterNode" @node-click="handleNodeClick" />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
// import { lazyList } from '@/api/manager/tree'
export default {
name: "TreePage",
props: {},
data() {
return {
// 模拟数据
analoDdata_01: [
{
"deptId": 100,
"parentId": 0,
"parentName": null,
"ancestors": "0",
"deptName": "XX街道",
"children": [],
"existSub": true, //是否还存在下级
}
],
analoDdata_02: [
{
"deptId": 1201,
"parentId": 100,
"parentName": null,
"ancestors": "0,100",
"deptName": "XX01村",
"children": [],
"existSub": true
},
{
"deptId": 1202,
"parentId": 100,
"parentName": null,
"ancestors": "0,100",
"deptName": "XX02村",
"children": [],
"existSub": true
},
{
"deptId": 1203,
"parentId": 100,
"parentName": null,
"ancestors": "0,100",
"deptName": "XX03村",
"children": [],
"existSub": false
}
],
// 村名称
deptName: undefined,
defaultProps: {
children: 'children',
label: 'deptName',
isLeaf: 'leaf',//指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
},
// 默认展开的节点的 key 的数组
treeData: [],
};
},
watch: {
// 在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。
// 需要注意的是，此时需要设置filter-node-method，值为过滤函数。
// 根据名称筛选村社树
deptName(val) {
this.$refs.tree.filter(val)
}
},
methods: {
// 关于树懒加载 (组件加载完成后，会主动触发一次)，后续则是点击时候会触发,
// 或者通过default-expanded-keys默认展开的节点的 key 的数组来触发这个方法，实现指定加载哪几层的数据。
loadNode(node, resolve) {
console.log(node, 'node')
// 如果展开第一级节点，从后台加载一级节点列表
if (node.level == 0) { // 获取第一层 也就是 analoDdata_01的数据
console.log('第一级节点')
const queryParams = {}
this.loadNodeHandle(resolve, queryParams, 1) //1获取模拟数据需要，实际可不用传递
}
// 如果展开其他级节点，动态从后台加载下一级节点列表
if (node.level >= 1) { // 获取第一层的下级 也就是 analoDdata_02的数据
console.log('其他级节点')
const queryParams = {}
// 根据当前节点的id，查询他下级的相关节点
queryParams.parentId = node.key
this.loadNodeHandle(resolve, queryParams, 2)// 2获取模拟数据需要，实际可不用传递
}
},
async loadNodeHandle(resolve, queryParams, type) {
console.log(queryParams, 'queryParams')
// 根据实践项目调用接口
// const list = await lazyList(queryParams).then(res => {
// console.log(res, '关于树懒加载')
// res.data.forEach(item => {
// item.leaf = !item.existSub
// })
// return res.data
// })
// 模拟数据
let list = [];
if (type == 1) {
list = this.analoDdata_01
list.forEach(item => {
item.leaf = !item.existSub
})
} else if (type == 2) {
list = this.analoDdata_02
list.forEach(item => {
item.leaf = !item.existSub
})
}
// 根据某些条件，获取到需要默认展开的节点的 key 的数组 this.treeData;
// this.treeData 中的id对应的节点，都会默认加载loadNode方法获取其下级数据，并展开；
if (list.length == 1) {
list.forEach(element => {
this.treeData.push(element.deptId)
})
}
return resolve(list)
},
// 过滤函数
filterNode(value, data) {
// console.log(value, data)
if (!value) return true
return data.deptName.indexOf(value) !== -1
},
// 左侧网格树-节点单击事件
handleNodeClick(data) {
console.log(data, '左侧网格树-节点单击事件')
},
},
};
</script>
2. 效果图
3. 使用到的部分属性说明
- default-expanded-keys： 默认展开的节点的 key 的数组；
- expand-on-click-node： 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点；
- load ：加载子树数据的方法，仅当 lazy 属性为true 时生效；
- lazy ：是否懒加载子节点，需与 load 方法结合使用；
- node-key ：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的；
- filter-node-method： 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏；
- node-click ：节点被点击时的回调；
4. 更多属性配置查看element官网
https://element.eleme.cn/#/zh-CN/component/tree
