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

  <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>

  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) {
    },
  },