vue2+elementUI的el-tree的懒加载功能

<el-tree
          class="filter-tree"
          ref="tree"
          accordion
          :data="leftData"
          @node-click="handleNodeClick"
          node-key="listId"
          :current-node-key="currentNodeKey"
          :highlight-current="true"
          :props="defaultProps"
          :default-expanded-keys="idArr"
          lazy
          :load="loadNode"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip
              class="item"
              effect="dark"
              :content="node.label"
              placement="top-start"
            >
              <span :id="data.listId">{{ node.label }}</span>
            </el-tooltip>
          </span>
 </el-tree>

import {
  getMenuList,
  getNodeMenuList,
  getDataList,
} from "@/api/index";
export default {
data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
      },
      currentNodeKey: "",
      leftData:[],
    }
  },
  methods:{
	// 懒加载获取数据
    loadNode(node, resolve) {
      if (node.level === 0) {// 第一层数据
      getMenuList({}).then((res) => {
      //左面导航栏省份信息
      if (res.data.resp_code == "200") {
        let data = res.data.datas;
        for (let key in data) {
          this.leftData.push({
            name: key,
            listId: key,
          });
        }
      }
    });
        return resolve(this.leftData);
      }
      if (node.level === 1) {// 第二层数据
        let provinceName = {
          provinceName: node.label, //上海
        };
        let twoList = [];
        getNodeMenuList(provinceName).then((res) => {
          res.data.datas.forEach((items) => {
            twoList.push({
              listId: items.listID,
              name: items.nodeName,
              provinceName: items.provinceName,
              children: [],
            });
            twoList.isLeaf = true;
          });
        });
        setTimeout(() => {
          resolve(twoList);
        }, 1000);
      }
      if (node.level == 2) {//第三层数据
        let obj = {
          nodeName: node.data.name,
          provinceName: node.data.provinceName,
        };
        let children = [];
        getDataList(obj).then((res) => {
          if (res.data.resp_code == "200") {
            res.data.datas.forEach((item, index) => {
              node.data.children.push({
                description: item.description,
                links: item.links,
                listId: item.listId,
                name: item.name,
                provinceName: item.provinceName,
                isLeaf: true,// 判断是不是子节点（最后一层数据 是否显示下拉图标） 如果不显示下拉图标为true 如果显示就可以不写
              });
            });
          }
        });
        resolve(node.data.children);
      }
      if (node.level > 2) {
        resolve([]);
      }
    },
}
}

 <el-tree
   :props="props"
   :load="loadNode"
   lazy
   node-key="id"
   :expand-no-click-node="true"
   ref="tree"
   show-checkbox
   :check-strictly="true"
   @check="checkClick"
 >
 </el-tree>

<script>
export default {
  data(){
    return{
      props:{
        // 用来控制展示节点内容的字段，根据后端数据自定义 label 值是什么
        label:'text',
        // 子级存放的位置，拼接数据时候把子级放到这里定义 childNodes 的字段中，字段名称自定义 注意：childNodes 是个数组。
        children:'childNodes',
        // 用来判断是否为最后一级子节点
        isLeaf:'lastNode',
        // 这里的 id 是用来关联上面 node-key="id" 因为这里的树使用 checkbox 所以用到了 node-key="id" 和 id， 正常的只是单纯加载tree的话是不需要的，看需求喽
        id:"id"
      }
    }
  }
};
</script>

methods: {
    // 功能讲解
    /* 默认参数：
       node：每加载一次当前加载的节点的所有数据
       reslove：渲染数据的方法，把得到该节点的所有数据(数组)放到该方法中 return 出去,节点就能渲染出来了。
     */
    async loadNode(node, reslove) {
      /* 
        判断是跟节点还是子节点，
        当 node.level == 0 的时候就是 tree 的跟节点（第一层；
        当  node.level 不等于 0 的情况就是每一层的节点了，没必要一直判断 level 是多少级别，除非有特殊需求
       */
      if (node.level == 0) {
        // 这里是请求接口，根据自己的项目请求接口就可以。
        let { resultValue } = await getTree(`pwi81cf45a5d07801452018091900001,${this.$store.state.userInfo.cityId}/`)
        // 这里就提到了 props 对象中的 disabled 属性的用法，通过找到请求接口找到满足条件的数据，然后这个给满足条件的数据添加一个 disabled = true 就可以实现 checkbox 禁用的效果了。
        resultValue.nodes[0].exValue == "" || resultValue.nodes[0].exValue == 'DYDJ' ? resultValue.nodes[0].disabled = true : null
        // 将请求回来的数据放到 reslove() 方法中渲染出来。
        return reslove(resultValue.nodes)
      } else {
        let endType = node.data.itemType.split('#')[1];
        let { resultValue } = await getTree(`pwi81cf45a5d07801452018091900001,${node.data.id}/${endType}`)
        /* 
          这里就是 props 对象中 isLeaf 属性的用法，上看我们定义的 isLeaf=‘lastNode'，
          通过循环请求回来的数据，hasChildren 值为 flase (这个值一般都是后端设置数据的时候有带，至于是什么字段就得看后端是怎么定义的)，用来判断是否还有下一级别， 
          当 hasChildren 值为 flase 的时候就可以给 请求回来的数据中添加一个 lastNode = true 的键值了，这就在你点开改节点的父级的时候就不回有提示 ，还能展开的三角箭头了。
        */
        resultValue.nodes.forEach(item => {
          item.hasChildren == false ? item.lastNode = ture : null
        });
        /* 
          这里是 props 对象中 children: 'childNodes' 属性的用法，因为是懒加载每次求情回来的数据都是没有和上面的数据有关联的一个数组，这时用想通过 el-tree 来实现树型结构的话我们就要拼装数据，将去回来的数据拼装到 当前节点的 childNodes 键值当中即可
        */
        node.data.childNodes = resultValue.nodes
        resultValue.nodes[0].exValue == "" || resultValue.nodes[0].exValue == 'DYDJ' ? resultValue.nodes[0].disabled = true : null
        return reslove(resultValue.nodes)
      }
    },
    // 套用模版
    async loadNode(node, reslove) {
      if (node.level == 0) {
        let res = await getData()
        return reslove(res.data)
      } else {
        let res = await getData()
        // 判断是否为最底层节点 根据自己接口返回的数据判断即可
        res.data.forEach(item => {
          item.hasChildren == false ? item.lastNode = ture : null
        });
        return reslove(res.data)
      }
    },
  },