el-tree树组件懒加载-后端上千条数据前端进行处理

叁歲伎倆 2024-03-26 19:01 10阅读 0赞

实现懒加载tree，需要为tree组件添加`lazy`和`:load="load"`  
首先，load属性绑定一个懒加载函数，当点击节点时触发

一般是通过树节点id请求后端接口，添加新的节点数据，但我最近遇到的是后端一次性返回上千条数据（树数组结构），由前端进行处理实现懒加载

我们来看下怎么实现

<el-tree
          ref="tree"
          lazy
          :load="load"
          highlight-current
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :node-key="key"
          :props="defaultProps"
          :current-node-key="currentNodeKey"
        >
       </el-tree>

1.  load方法会回调两个参数，第一个是节点信息`node`，第二个是加载函数`resolve`
2.  `resolve`会默认触发一次，并且`node.level===0`，所以就不用在`created`中请求后端数据了，直接在默认触发中请求后端数据
3.  如果`node.level===0`说明是默认触发，直接`resolve`请求后端返回的树数组数据，el-tree懒加载情况下只会渲染数组的第一级，不会渲染数组的children
4.  在默认触发的时候将树数组转成扁平数组，后续懒加载节点的时候从扁平数组里取就可以了
5.  因为懒加载树无法判断有没有子节点，所以必须手动添加`leaf:true`，才能取消左侧的小箭头，在树结构数组转换成扁平数组时给没有子节点的数组对象加上这一属性
6.  很多时候需要默认展开树节点，比如选中第一级下第一个节点，在nextTick中`nodedata.expanded = true`来展开节点，`nodedata.loadData()`再次触发resolve函数

methods: {
        
        /** 传递一个懒加载函数给el-tree组件 */
        load(node, resolve) {
        
          this.chooseNode = node;
          // 这里后端给的数据唯一标识不是id，是key，根据个人数据修改
          this.getTreeData(node.level, node.data.key, resolve);
        },
        /** 懒加载树节点数据处理函数 */
        async getTreeData(level, key, resolve) {
        
          if (level === 0) {
        
            this.loading = true;
            const {
         data: res } = await http.post('getTreeNode');
            if (res.code === 200 && res.data && res.data.length) {
        
              this.treeData = this.treeArrayToArray(res.data);
              resolve(res.data);
              this.$nextTick(() => {
        
                // 零级的第一个子节点，也就是第一级的第一个节点
                let nodedata = this.chooseNode.childNodes[0];
                nodedata.expanded = true;
                // 再次触发load方法
                nodedata.loadData();
                // 注意，因为上方再次触发load方法，走了this.chooseNode = node;这一步，所以这里的 this.chooseNode指向的是零级的子节点，也就是第一级，这里的`this.chooseNode.childNodes[0]`表示的是是第二级的第一个节点
                this.currentNodeKey = this.chooseNode.childNodes[0].data.key;
                this.handleNodeClick(this.chooseNode.childNodes[0].data);
              });
            } else {
        
              resolve([]);
            }
            this.loading = false;
          } else {
        
            // 根据key去找到点击树节点的children数组，加载数据到其下
            const currentNode = this.treeData.find(item => item.key === key);
            if (currentNode.children && currentNode.children.length) {
        
              resolve(currentNode.children);
            } else {
        
              resolve([]);
            }
          }
        },
        /** 树结构数组转换成扁平数组 */
        treeArrayToArray(tree) {
        
          const arr = [];
          function recursiveFunction(tree) {
        
            for (let i = 0; i < tree.length; i++) {
        
              // 给所有没有子节点的节点添加leaf属性，该属性用来取消左侧小箭头
              if (!(tree[i].children && tree[i].children.length)) {
        
                tree[i].leaf = true;
              }
              arr.push(tree[i]);
              if (tree[i].children && tree[i].children.length) {
        
                recursiveFunction(tree[i].children);
              }
            }
          }
          recursiveFunction(tree);
          return arr;
        },
        /** 获取点击树节点的数据，进行渲染右侧页面等操作 */
        handleNodeClick(data) {
        
        },
      },