Vue ElementUI Tree结构 实现懒加载案例

官方文档比较全面，这里我就自己的实际开发提供一个案例，刚刚接触前端，不足之处，感谢指正
官方文档

el-tree>

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',  //name 就是你自己想要在页面上展示的名称
          children: 'zones', 
          isLeaf: 'leaf' 
        },
      };
    },
    methods: {
    	//懒加载数据实现方法
      loadNode(node, resolve) {
        if (node.level === 0) { //根节点
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);
		//根节点下的子节点
        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }
    }
  };
</script>

我对上面案例中最重要的部分进行了说明，下面展示一下我的实际代码

<template>
  <div class="orgStruTree" style="background-color: #ffffff">
    el-tree>
  div>
template>

<script>
//axios 统一的api管理
import { orgInfoNext, orgInfoById,empInfoByOrgUuid } from "../api/api";

export default {
  name: "orgStruTree",
  data() {
    return {
     props: {
          label: 'orgName', 
          children: 'child',
          isLeaf: 'leaf'
        },
    };
  },
  methods: {
    //点击节点方法 这里可以不用，我是为了实现其他功能
     handleNodeClick(node,data) {
                console.log("点击树节点");
                console.log(node);
                console.log(data);
                this.clickTree = data;

              
            },        
    //懒加载方法
    loadNode(node,resolve){
      //根节点数据
      if(node.level === 0)
      {
        let params = {
           orgId : 1 
        };
        //向后台请求根节点数据
        orgInfoById(params).then(res => {
          if(res.data.code == 200){
          //声明一个对象，用来接收根节点数据
          const data = res.data.result;
           return resolve([data]);
          }else {
            this.$message({
                message: res.data.message,
                type: "error",
              });
          }
        }).catch(res => {
          resolve([]);
        });
      } else {
      this.getChildsList(node,resolve);
      }
    },
    //获取加载不同的数据层   async采用异步方式
    async getChildsList(node,resolve) {
      //查询当前组织的下级组织
      let params = {
        orgId : node.data.orgId,
        };
        orgInfoNext(params).then((res) =>{
           if(res.code == 200){ 
             const data = res.result.object;
             //将数据渲染到tree中
             resolve(data); 
             } else {
            this.$message({
                message: res.message,
                type: "error",
              });
          }
        }).catch(res =>{
          resolve([]);
        });
        
    }
    };
</script>