基于elementui tree控件 点击节点进行异步加载（按需加载）

 1.引入

2.注册数据

props: {
        label: "regionName",//这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
        children: [],
        isLeaf: "leaf"
      }

3.注册方法

handleNodeClick(data) {
      console.log("node", data);
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      console.log(node);
      console.log(resolve);
      // 一级节点处理
      if (node.level === 0) {
        this.requestTree(resolve);
      }
      // 其余节点处理
      if (node.level >= 1) {
        // 注意！把resolve传到你自己的异步中去
        this.getIndex(node, resolve);
      }
    },
    // 异步加载叶子节点数据函数
    getIndex(node, resolve) {
        var param = {
          code: "002",
          provinceId: node.data.regionCode
        };
        var url = "/base/inter";
        this.$ajax
          .post(url, param)
          .then(out => {
            console.log(out.data.data);
            // 此处需要后台传过来一个值来判断每个节点有无子节点,实际项目中必须加上（如isRealLeaf），不传都默认为叶子节点
            //  out.data.data.forEach(value => {
            //   if (value.isRealLeaf === 'Y') {
            //     value.leaf = true//不为叶子节点
            //   } else {
            //     value.leaf = false//为叶子节点
            //   }
            // })
            let data = out.data.data;
            resolve(data);
          })
          .catch(error => {});
     
    },
    // 首次加载一级节点数据函数
    requestTree(resolve) {
      var param = {
        code: "001"
      };
      var url = "/base/inter";
      this.$ajax
        .post(url, param)
        .then(out => {
          console.log(out.data.data);
          // 此处需要后台传过来一个值来判断每个节点有无子节点,实际项目中必须加上（如isRealLeaf），不传都默认为叶子节点
          //  out.data.data.forEach(value => {
          //   if (value.isRealLeaf === 'Y') {
          //     value.leaf = true//不为叶子节点
          //   } else {
          //     value.leaf = false//为叶子节点
          //   }
          // })
          let data = out.data.data;
          resolve(data);
        })
        .catch(error => {});
    }

4.关于后台返回数据的注意点：需返回一个判断该节点有无子节点的参数。

来源于element UI tree 控件，点击父节点进行异步加载中的一条评论，亲试有效