el-cascader 联级选择器动态加载子节点数据

先看我做的效果

可能每个人想要的效果不一样，我的只能做一个参考，一级数据是定死的，二级和三级数据是通过选中上级数据，请求回来的，

先看代码

              <el-cascader
                ref="cascader" // 全部选中是返回数据时需要
                size="mini"  // 可有可无
                style="width: 220px" // 可有可无
                @change="change" // 上传事件
                :props="props" // 必要，配置属性
                :options="options" //必要 可选项数据源，键名可通过Props属性配置
                clearable // 是否可以清空
              >
              </el-cascader>

<script>
export default {
 data(){
  return {
   options: [],
   props: {
    // multiple: true, // 开启只显示最后选择的值,按照需求来
    emitPath: false, // 设置 false，则只返回该节点的值
    lazy: true,
    async lazyLoad(node, resolve) {
     const { level } = node;
     let stop_level = 3; //设置需要几级数据，
     // list 初始数据，我的是写死的，你们可以根据你们的实际情况去修改，
     let list = [
            {
              label: "车辆类型",
              value: 1,
            },
            {
              label: "物资类型",
              value: 2,
            },
            {
              label: "专家类型",
              value: 3,
            },
          ];
          console.log(list);
          // 超过最大层级，停止向下加载
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 1) {
            const { value } = node;
            console.log("选中的值",value); // value选中的值
            let nodes = await getDropDownData({ resourType: value }); //需要发起的请求接口
            let _nodes = nodes.data.records.map((item) => ({
              value: item.id,
              label: item.name,
            }));
            console.log(_nodes);
            resolve(_nodes);
          } else if (level == 2) {
            const { value } = node;
             console.log("选中的值",value); // value选中的值
            let nodes = await getskuList(value); // 需要发起的请求接口
            let _nodes = nodes.rows.map((item) => ({
              value: item.id,
              label: item.name,
              leaf: true, //控制是不是最后一级了
            }));
            resolve(_nodes);
          }
           //要是你还需要三级，四级，五级数据，可以直接往后面这样加就可以了
           //else if (level == 3) {
           // const { value } = node;
           //  console.log("选中的值",value); // value选中的值
           //let nodes = await getskuList(value); // 需要发起的请求接口
           // let _nodes = nodes.rows.map((item) => ({
           //  value: item.id,
           // label: item.name,
           //  leaf: true,
           // }));
           // resolve(_nodes);
           // }
            else {
            callback();
          }
        },
      },
  }
 }

methods：{
     change(e) {
      // console.log(this.options);
      let nodeObj = this.$refs["cascader"].getCheckedNodes();
      console.log("节点的值", e);
      console.log("节点全部数据", nodeObj);
    },
 }
}
</script>