vue+elementUI 使用el-tree实现异步懒加载

参考文章：https://ld246.com/article/1519116520740

treeLoading:false,
treeData: [],
nodeProps: { children: "children", label: "name", isLeaf: "leaf" },

            <el-tree
                v-loading="treeLoading"
                ref="tree"
                :data="treeData"
                :props="nodeProps"
                :load="loadNode"
                lazy
                node-key=""
                highlight-current
                @node-click="handleNodeClick"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <i class="el-icon-folder"></i>
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>

/**加载树*/
    loadTree(parentId, resolve) {
      this.treeLoading = true;
      casetypeApi
        .list({
          parentId: parentId || "0",
        })
        .then((response) => {
          if (response.data.data && response.data.data.length) {
            for (let i = 0; i < response.data.data.length; i++) {
              const element = response.data.data[i];
              element.children = [];
            }
            console.log(parentId);
            if (parentId) {
              resolve(response.data.data);
            } else {
              this.treeData = response.data.data;
            }
          } else {
            this.treeData = [];
          }
          this.treeLoading = false;
        });
    },

    loadNode(node, resolve) {
      console.log(node.data.id);
      if (node.level === 1) {
        this.loadTree(node.data.id, resolve);
      }
    },