element下el-cascader级联选择框动态懒加载用法

在项目中碰到需要根据一级数据去请求二级然后根据二级去请求三级等等。。。。类似于根据省去找下一级的市、县、等等。如果将数据一次性请求过来，那样页面一打开就得发送几十甚至上百条请求，如果数据量增大还得随之增大，或者让后端一次性全部返回过来，但如果数据量过大一次返回过来还是存在各种问题。
这时候使用element的动态懒加载，它可以根据用户点击的数据动态去加载该条数据的下一层，自带缓存功能就很舒服。废话不多说直接上代码吧。
动态数据绑定懒加载下一级

    <el-cascader
      placeholder="请选择要发送的数据类型"
      ref="cs"
      v-model="checkedData.sendData"
      :props="checkedData.typeOptions"
      @change="m_snedDataChange"
      filterable
      size="mini"
    >
    </el-cascader>
  // 当前选中的数据
  checkedData: {
    sendData: ["R_RAW_STTD"], // 默认选中值
    typeOptions: {
      lazy: true,   // 开启懒加载
      lazyLoad: this.lazyLoad,  懒加载数据格式
    },
  },
   

   async lazyLoad(node, resolve) {
  		let level = node.level;
 		let result;
  		let res;
        let param;
  switch (level) {
    case 0: // 类型
      result = [
        {
          value: "R_RAW_STTD",
          label: "参数一",
        },
        { value: "R_RAE_STTD", label: "参数二" },
        { value: "R_CMD_STTD", label: "参数三" },
      ];
      break;
    case 1:  //一级目录
      res = await tmTcMap.satelliteFindAll();
      result = res.data;
      result.forEach((item) => {
        item.value = item.satelliteId;
        item.label = item.chineseName;
      });
      break;
    case 2: // 二级目录
      param = {
        satelliteId: node.data.value,
      };
      res = await tmTcMap.stationQueryStationBySatelliteId(
        this.$qs.stringify(param)
      );
      result = res.data;
      console.log(result);
      result.forEach((item) => {
        item.value = item.stationId;
        item.label = item.name;
      });
      break;
    case 3: 三级目录
      param = {
        stationId: node.data.value,
      };
      res = await tmTcMap.stationGetDeviceByStationId(
        this.$qs.stringify(param)
      );
      result = res.data;
      console.log(result);
      result.forEach((item) => {
        item.value = item.deviceId;
        item.label = item.name;
	// 大于三级后不再显示后面的，到此结束
        item.leaf = level >= 3;
      });
      break;
    default:
      result = [];
      break;
  }
  resolve(result);
},

其实到这里就已经处理完成了，但你的默认选中值如果也是动态去请求过来的话，虽然数据会变，但element选择框显示这块是没法监测到的，就得再写一个方法 ，在你请求到默认值的时候强制给刷新下lazyLoad
// 异步设置cascader的值
// cs 是选择框的ref值
setValue() {
let cs = this.$refs[“cs”];
cs.panel.activePath = [];
cs.panel.loadCount = 0;
cs.panel.lazyLoad();
},