elementUI级联懒加载（Cascader），动态数据，使用后端接口数据

问题描述：

如何使用后端接口数据，一级一级的加载数据

解决方案：

在element-ui官网中，给出了懒加载的示例。Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

 <el-cascader v-model="form.typeId" :props="Props":show-all-levels="false"></el-cascader>
 data() {
    return {
      form: {
        typeId: [],
      },
      // 级联
      Props: {
        value: 'id',
        label: 'name',
        lazy: true,
        lazyLoad: (node, resolve) => {
          console.log(node, 'node');
          let { value = 0 } = node;
          this.$http.get(`/nhf-core-data/basictype/listByParentIdWithOutSpecialTypeId?		   category=raw&parentId=${value}`).then((res) => {
          // 这行代码筛选不需要的级联
            let node = res.filter((el) => el.name !== 'XXX');
            node.map((el) => {
              el.leaf = !el.hasChildren;
              return el;
            });
            resolve(node);
          });
        },
      },
    };
  },

问题总结如下:

级联和下拉框，读取值的时候默认都是识别value、label两个属性；当数据返回的值不同时，可以在props中，对这两个数据指向重定义Props: { value: 'id', label: 'name'}；
或者对拿到的数据进行重组：

res.map((el) => {
      return {
        label: el.name,
        value: el.id,
        leaf: !el.hasChildren,
    };
 });

关键点leaf，叶子节点，为true则表示当前已经是叶子，不再执行resolve。为false，当前为根节点，表示还存在子节点，可继续查找。这很可能是你遇到懒加载只执行一次或者说已经没有下一级确还是还是在执行resolve的原因！！！