[JavaScript知识库]关于elementui中的tree形组件的懒加载模式的使用

<template>
  <div>
    <el-tree
      node-key="id"
      lazy
      :load="loadNode"
      :props="defaultProps"
      :expand-on-click-node="false"
      :check-on-click-node="true"
      v-loading="list.loading"
      @node-click="nodeClick"
      ref="tree"
    >
    </el-tree>
  </div>
</template>

<script>
// https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxt
import axios from "axios";
export default {
  data() {
    return {
      list: {
        loading: false,
        isExpand: false,
      },
      defaultProps: {
        // tree 控件的数据结构，需要设置 isLeaf
        children: "children",
        label: "name",
        isLeaf: "leaf",
      },
      loading: false,
      curPath:'',
      curNode:''
    };
  },
  methods: {
    nodeClick(data, node) {
      this.curPath = data.path;
      this.curNode = node;
    },
    // 实现局部刷新，在点击弹窗处调用的
    partialRefreshpartialRefresh(node) {
      node.loaded = false; // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
      node.expand(); // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
    },

    async loadNode(node, resolve) {
      // 懒加载
    //   console.log(52,node);
    //   if (node.level === 0) {
    //     return resolve(await this.getTagList());
    //   } else if (node.level === 1) {
    //     return resolve(await this.getTagApiList(node.label));
    //   }else if (node.level === 2) {
    //     return resolve(await this.TagApiList(node.label));
    //   }
    //    else {
    //     return resolve([]); // 防止该节点没有子节点时一直转圈的问题出现
    //   }
     return resolve(await this.getTagList(node, resolve))
    },
    async getTagList(node, resolve) {
        var level = ''
        console.log(67,node);
        if(node.level==0){
            level='zxt'
        }else if(node.level==1){
            level='zxtb'
        }else{
            level='zxtc'
        }
        console.log(node.level,level);
       
      // 获取所有接口所属模块 -> 第一层
      this.list.loading = true;
      const res = await axios.get(
        `https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/${level}`
      );
    
      const tags = res.data.data;
      tags.forEach((item, index) => {
        // 节点需要构建为 tree 的结构
        item.name = item.label;
        item.id = index;
        item.leaf = false;
      });
      this.list.loading = false;
      console.log(55, tags);
      return tags;
    },
    // async getTagList(node, resolve) {
    //   // 获取所有接口所属模块 -> 第一层
    //   this.list.loading = true;
    //   const res = await axios.get(
    //     "https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxt"
    //   );
    
    //   const tags = res.data.data;
    //   tags.forEach((item, index) => {
    //     // 节点需要构建为 tree 的结构
    //     item.name = item.label;
    //     item.id = index;
    //     item.leaf = false;
    //   });
    //   this.list.loading = false;
    //   console.log(55, tags);
    //   return tags;
    // },
    async getTagApiList(tag) {
      // 查询模块下的接口列表 -> 第二层
     
      const res = await axios.get(
        "https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxtb"
      );
      const results = res.data.data;
       console.log(85,results);
      results.forEach((item) => {
        item.name = item.label;
        item.id;
        item.leaf = true;
      });
      return results;
    },
    async TagApiList(tag) {
      // 查询模块下的接口列表 -> 第二层
     
      const res = await axios.get(
        "https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxtc"
      );
      const results = res.data.data;
       console.log(103,results);
      results.forEach((item) => {
        item.name = item.label;
        item.id;
        item.leaf = true;
      });
      return results;
    },
  },
};
</script>

<style>
</style>