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

目录

  • 1.代码实现
  • [2. 效果图](#2. 效果图)
  • [3. 使用到的部分属性说明](#3. 使用到的部分属性说明)
  • [4. 更多属性配置查看element官网](#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. 使用到的部分属性说明

  1. default-expanded-keys: 默认展开的节点的 key 的数组;
  2. expand-on-click-node: 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点;
  3. load :加载子树数据的方法,仅当 lazy 属性为true 时生效;
  4. lazy :是否懒加载子节点,需与 load 方法结合使用;
  5. node-key :每个树节点用来作为唯一标识的属性,整棵树应该是唯一的;
  6. filter-node-method: 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏;
  7. node-click :节点被点击时的回调;

4. 更多属性配置查看element官网

https://element.eleme.cn/#/zh-CN/component/tree

相关推荐
青灯文案13 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254888 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.20 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营24 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特1 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript