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

语言: CN / TW / HK

theme: channing-cyan highlight: a11y-light


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

问题描述

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

效果图

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

1.gif

懒加载前端代码

html部分

```js ```

js部分

```js

```

思路分析

首先,使用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)所以就会有如下代码:

js 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参数打印效果图

2.png

resolve参数打印效果图

3.png

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

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

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

7.png

完整代码地址

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

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