el-tree树形组件懒加载

shsyzhzhgn

已于 2024-04-09 10:58:34 修改

阅读量1.3k

点赞数 8

文章标签： vue.js elementui typescript

于 2024-04-08 10:08:23 首次发布

本文链接：https://blog.csdn.net/shsyzhzhgn/article/details/137493160

版权

一、树形懒加载

初始化只获取最外层节点数据，展开节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。

如果你想提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。可以在数据添加leaf: true，就证明该节点下没有子级。

提前判断是否为叶子节点效果：0,1数据left:true为叶子节点不能展开，其他节点非叶子结点展开时才获取数据；

二、HTML部分

  <el-tree
            lazy
            :props="treeProps"
            :load="handleLoad"
          >

三、TS部分

const treeProps = {
  label: "name",
  children: "children",
  isLeaf: "leaf",
};

const handleLoad = (node: any, resolve: any) => {
    if (node.level === 0) {//第一级节点
      loadNode(resolve);
   }else if (node.level > 1) //其他级节点
    loadNode(resolve, node.data.id);
   }
  };

const loadNode = async (resolve: any, id?: any) => {
    if (!id) {
      let res = await getDirectoryListApi();//第一级节点接口不用传参
      resolve(res.data);
  } else {
    let res = await getDirectoryListApi({ parent_id:id});//传当前节点的id,获取节点数据
    return resolve(res.data);
  }
  };

四、思路

首先，使用el-tree树组件必须指定lazy和load属性

lazy告知树组件开启懒加载模式，加上即可
load绑定的是一个函数，这个函数主要是用来在页面初始化加载的时候，用于向后端发请求获取el-tree的树结构的数据的。页面初始化加载，load绑定的函数会自动执行

注意，如果树组件开启了懒加载模式，就不用在el-tree组件标签中写:data="data属性了，因为load绑定的函数，有两个参数，node和resolve，node是树节点，而resolve又是一个函数，相当于高阶函数（函数柯里化）了，我们只需要把后端返回的数据（单层数组结构），放在这个函数里面，这个函数会自动把数据传递到树组件里面去，同时渲染视图

我们需要和后端约定好传递的数据结构，即props中的配置

data中的props中的isLeaf属性，指定的是：是否是树组件中的叶子节点。什么是叶子节点？我们知道一棵树有很多分支（树枝），而树枝的末梢则是叶子，所以叶子节点就是树节点的最内层，最里层。所以，我们需要和后端沟通，让后端返回的树结构数据中，最内层数据加上isLeaf属性布尔值，为true就代表是最内层，为false，或者不加这个属性，就代表不是最内层。对应树组件的页面效果就是：为true的树组件，最内层不会有三角箭头。即到底了，没懒加载了