Vue + Element tree树形控件的懒加载使用

一、效果展示

二、视图

<el-tree
  accordion
  lazy
  :load="loadNode"
  :props="props"
  @node-click="handleNodeClick"    
>
</el-tree>

三、data定义

props: {
  label: "nodeCname",
  children: "zones",
},

四、script方法

//懒加载
    loadNode(node, resolve) {
      // 加载 树数据
      let that = this;
      if (node.level === 0) {
        setTimeout(() => {
          that.loadtreeData(resolve);
        }, 500);
      }

      if (node.level >= 1) {
        console.log("node.data.nodeId,", node.data.nodeId);
        setTimeout(() => {
          this.getChildByList(node.data.nodeId, resolve);
          return resolve([]); // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
        }, 500);
      }
      if (node.level > 3) return resolve([]);
    },
    // 获取一级目录
    loadtreeData(resolve) {
      selectTreeList()
        .then((response) => response.data)
        .then((result) => {
          if (result.length !== 0) {
            let tabTitleList = result;
            tabTitleList.forEach((item) => {
              item.nodeCname = item.nodeCname;
            });
            resolve(tabTitleList);
          } else {
            return false;
          }
        })
        .catch((err) => {});
    },
    // 获取子节点请求
    getChildByList(_parentID, resolve) {
      selectNodeChildren({ nodeId: _parentID })
        .then((response) => response.data)
        .then((result) => {
          if (result.length !== 0) {
            let tabSecondList = result;
            tabSecondList.forEach((item) => {});
            resolve(tabSecondList);
          } else {
            return false;
          }
        })
        .catch((err) => {});
    }