Element cascader动态加载

一开始也是网上查找：https://blog.csdn.net/lgh1206/article/details/113932595  看的这位博主的，他是自己创建的数据

我这边是与后端联调： 

 <el-cascader
              style="width: 170px"
              :options="options"
              :props="props"
              @change="handleChange"
              placeholder="省 / 市 / 区"
></el-cascader>


data(){
    options: [],
      props: {
        label: "name", 
        value: "id",
        lazy: true,
        lazyLoad: (node, resolve) => {
          if (node.level == 0) {
            this.getLevelOne(node, resolve);
          } else if (node.level == 1) { 
            this.getLevelTwo(node, resolve);
          } else if (node.level == 2) {
            node.level = 2;
            this.getLevelThree(node, resolve);
          }
        },
      },
},
methods:{
  // 三级联动 - 一级
    getLevelOne(node, resolve) {
      一级接口({}).then((res) => {
        if (res.code == 200) {
          this.options = res.data;
        }
      });
    },
    // // 三级联动 - 二级
    getLevelTwo(node, resolve) {
      let data = {
        provinceId: node.data.id,
      };
      二级接口(data).then((res) => {
        let optionChild = res.data;
        optionChild.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        resolve(optionChild);
      });
    },
    // // 三级联动 - 三级
    getLevelThree(node, resolve) {
      let data = {
        cityId: node.data.id,
      };
      三级接口(data).then((res) => {
        let optionChilds = res.data;
        optionChilds.map((item) => {
          item.leaf = !item.hasChildren; // 这里是区分最后一级时不让显示箭头
          return {
            value: item.id,
            label: item.name,
            leaf: item.leaf,
          };
        });
        resolve(optionChilds);
      });
    },  
handleChange(value) {
      console.log(value);
    },
}

本来label和 value是一二三级为不同的字段名，但是 data里面的label和value 是哪一级的字段名cascader就只能显示那一级的（这里要和后端商量好，一二三级的字段名要统一）