el-cascader懒加载实现动态添加节点

一、需求描述：

1. 根据父节点id请求子节点数据并动态添加
2. 父子节点不关联，父节点和子节点都可以勾选

二、代码：

html：

<el-cascader
  v-model="dialogForm.orgList"
  :options="orgOptions"
  :show-all-levels="false"
  filterable
  clearable
  :props="{
    label: 'name',
    value: 'id',
    checkStrictly: true,
    multiple: true,
    expandTrigger: 'hover',
    lazy: true,
    lazyLoad: orgLazyLoad,
  }"
></el-cascader>

js：

orgLazyLoad(node, resolve) {
  const { value, hasChildren, children } = node;
  // 如果当前项有子级(hasChildren为true)且子级数据还未加载(children.length=0)，才发请求获取下一级数据
  if (hasChildren && children.length == 0) {
    getChildOrgList({
      id: value,
    }).then((res) => {
      const { code, data } = res.data;
      if (code == 200) {
        let dataList = [];
        dataList = data.map((item) => {
          item.leaf = !item.hasNext;//给每一项添加标识，用来判断是否是最后一级
          return item;
        });
        resolve(dataList);
      } else {
        resolve([]);
      }
    });
  } else {
    resolve([]);
  }
},

三、效果展示：