el-tree树组件的懒加载写法步骤

树结构在项目中其实还是比较常见的，本篇文章以饿了么UI中的el-tree组件为例，讲述一下树组件的懒加载的实现步骤。当然，顺带吐槽一下官方文档的案例写的不太接地气

问题描述

树组件如果数据比较多的话，一次性把整棵树的数据都请求到，略有耗时。所以为了优化性能，我们就要实现树组件懒加载的效果，也就是当我们点击树节点的时候，再去向后端发请求，获取对应点击的树节点下的数据。这样的话，点击哪里，加载哪里，性能会提高不少。

效果图

我们先看一下最终的成品效果图

懒加载前端代码

html部分

<template>
  <div class="box">
    <div class="leftBox">
      <el-tree lazy :load="loadNode" :props="props" node-key="id">
      </el-tree>
    </div>
  </div>
</template>

js部分

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        isLeaf: "isLeaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      //如果展开第一级节点，从后台加载一级节点列表
      if (node.level == 0) {
        this.loadfirstnode(resolve);
      }
      //如果展开其他级节点，动态从后台加载下一级节点列表
      if (node.level >= 1) {
        this.loadchildnode(node, resolve);
      }
    },
    //加载第一级节点
    async loadfirstnode(resolve) {
      let params = {
        level: 0,
      };
      const res = await this.$api.getTreeData(params);
      return resolve(res.data);
    },
    //加载节点的子节点集合
    async loadchildnode(node, resolve) {
      // console.log("超过二级的", node, node.level);
      let params = {
        id: node.key,
      };
      const res = await this.$api.getTreeChildData(params);
      return resolve(res.data);
    },
  },
};
</script>

思路分析

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

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

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

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

本例中是一个便于理解的简单el-tree的demo，所以就按照最简单的配置书写

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

注意，因为树组件的懒加载是，点击树组件节点，加载下一层的数据，所以要和后端同事沟通，让后端接口数据不要一次性的返回整个树结构的数据，而是分层返回，点击那个树节点，树节点数据中会有id的，根据id发请求到后端，后端再把对应数据返回给前端，是数组结构的数据

接下来说说发请求这一块

因为树组件的load属性绑定的函数，初始化就会加载发请求，又因为树组件可以分为最外层和非最外层，所以在load绑定的函数中，本例是loadNode函数里面发请求，可以分两类：最外层和非最外层。（最外层level为0，非最外层levle大于0）所以就会有如下代码：

loadNode(node, resolve) {
  console.log('node节点数据记录了很多信息',node);
  console.log('resolve高阶函数给树组件赋值',node);
  //如果展开第一级节点，从后台加载一级节点列表（固定的）
  if (node.level == 0) {
    this.loadfirstnode(resolve);
  }
  //如果展开其他级节点，动态从后台加载下一级节点列表（可变的）
  if (node.level >= 1) {
    this.loadchildnode(node, resolve);
  }
},

我们打印node参数和resolve参数，发现分别是树节点和一个函数，树节点记录了很多信息，其中就有树的层级

node参数打印效果图

resolve参数打印效果图

最后注意后端返回的数据结构

初始化加载最外层西游记和三国演义节点

点击西游记加载孙悟空、猪八戒、沙和尚节点

完整代码地址

附上Gitee完整代码，方便大家理解，里面分为简化版的el-tree和优化版的el-tree

https://gitee.com/ah-shuai/demo-of-el-tree