element-ui 使用load进行加载

(红框为机构，下面没圈的为部门)
需求是这样的， 后台返回的数据中，tree结构有的返回子节点数据了，有的没有返回子节点数据，（因为全部返回的数据量很大）没有返回子节点的需要在点击的时候 调取接口，在进行加载当前父节点下的子节点数据，但有子项的还要显示图标

所以，这个时候就可以使用load进行加载节点
这里只用关注 lazy :load=“loadNode” （两者搭配使用，否则没有效果） 具体可以看官方文档
html代码

          <el-tree ref="tree" :data="data" lazy :load="loadNode" :highlight-current="true" :default-expanded-keys="idArr" :default-checked-keys="idArr" :props="defaultProps" @node-click="handleNodeClick" node-key="id">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <img v-show="data.type=='jg'" class="imgClass" src="@/assets/img/organ.png">
                <img v-show="data.type=='bm'" class="imgClass" src="@/assets/img/organ-second.png">
                {{node.label}}
              </span>
            </span>
          </el-tree>

data 中 绑定一个isLeaf :leaf

          defaultProps: {
            children: 'items',
            label: 'name',
            isLeaf: 'leaf'
          },

methods中的loadNode的方法

node.level === 0 的时候为我们初始化刚进来的时候， 直接去加载树列表即可 node.level === 1
等于1的时候就为我们的根节点了 unit.count 为后台返回的，判断当前节点下是否有子级

    loadNode(node, resolve) {
      const self = this;
      if (node.level === 0) {
        node.data.forEach(unit => {
          if (unit.count === 0) {
            // 叶子节点
            unit.leaf = true;
          } else {
            unit.leaf = false;
          }
        });
        return resolve(node.data || []);
      }
      if (node.data.count === 0) {
        // 叶子节点
        node.data.leaf = true;
      } else {
        node.data.leaf = false;
      }
      if (node.level === 1) {
        (node.data.items || []).forEach(unit => {
          if (unit.count === 0) {
            // 叶子节点
            unit.leaf = true;
          } else {
            unit.leaf = false;
          }
        });
        return resolve(node.data.items || []);
      }
      if (node.data.type === 'bm') {
        // 部门
        (node.data.items || []).forEach(unit => {
          if (unit.count === 0) {
            // 叶子节点
            unit.leaf = true;
          } else {
            unit.leaf = false;
          }
        });
        return resolve(node.data.items || []);
      } else if (node.data.type === 'jg') {  //这个为机构的话，就可调取接口，机构后台返回的是子项全部数据
        // 机构请求接口
        systemApi
          .getOrganizeTree({ flag: '1', type: 'jg', bmid: node.data.id })
          .then(res => {
            let treeData =
              res &&
                res.data &&
                res.data.listtreenode &&
                Array.isArray(res.data.listtreenode)
                ? res.data.listtreenode
                : [];
            treeData.forEach(unit => {
              if (unit.count === 0) {
                // 叶子节点
                unit.leaf = true;
              } else {
                unit.leaf = false;
              }
            });
            return resolve(treeData);
          })
          .catch(err => {
            self.$message.error(err.msg || '获取数据失败');
            return resolve([]);
          });
      }
    },