element中Tree 树形控件实现节点过滤和懒加载节点

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.keythis.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_01list.forEach(item => {item.leaf = !item.existSub})} else if (type == 2) {list = this.analoDdata_02list.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 truereturn 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 ：节点被点击时的回调；