{{ node.label }}
          

vue el-tree树的懒加载实现

样式1：

首先加载第一层树节点(要有加载第一层节点的接口才ok)

样式2：

当点击第一层节点，或者其他层父节点的时候，加载其子节点，形成一个懒加载的效果。

代码实现：

重要的是在tree中设置

:load=“loadNode”

lazy

created() {
    this.init();
  },
 methods: {
    // 初始化第一层树
    init() {
      this.getTreeData();
    },
    // 得到第一层树的列表
    async getTreeData() {
      const param = {
        type: Number(this.cateTabActive),
        keyword: this.keyword
        };
      const res = await this.$api.get('/api/category', param);
      if (res.code == 200) {
      // treeData 就是树绑定的数据
        this.treeData = res.info;
      } else {
        return false;
      }
    },
     // 树的懒加载
    loadNode(node, reslove) {
      let that = this;
      if (node.level === 0) {
        reslove(that.treeData);
      }
      if (node.level >= 1) {
        this.loadNodeChildren(node, reslove);
      }
    },
    // 树的懒加载获取子节点
    async loadNodeChildren(node, reslove) {
      let param = {
        categoryId: node.data.id,
        type: Number(this.cateTabActive)
      };
      const res = await this.$api.get('/api/category', param);
      let resArr = [];
      if (res.code === 200) {
        res.info.forEach(item => {
          item = JSON.parse(JSON.stringify(item));
          resArr.push({
            name: item.name,
            id: item.id,
            leaf: item.leaf,
            parentCategoryId: item.parentCategoryId,
            currentLevel: item.currentLevel,
            relateCount: item.relateCount
          });
        });
        // 将得到的孩子列表，塞进树中
        this.$refs.indexTree.updateKeyChildren(node.data.id, resArr);
        return reslove(res.info);
      }
    },