element ui 级联选择器动态加载

利用elementui的级联选择器先请求第一级数据，当用户点击第一级节点时再根据点击节点的id请求它的子类并渲染

<el-cascader
            clearable
            placeholder="请选择"
            v-model="form.dsdCode"
            :props="cascaderProps"
  ></el-cascader>

export default {
  data() {
    return {
    cascaderProps: {
       // label: "goodsName",//当返回的数据字段不是label和value可以改成实际的字段比如goodsName
       // value: "goodsCode",
       // children: "options2"
        lazy: true,
        lazyLoad: this.lazyLoad
                }
        }
    },
   methods: {
    lazyLoad(node, resolve) {
      this.getData(node, resolve);
    },
    async getData(node, resolve) {
      let that = this;
      let level = node.level;
      if (!node.data) {
        await this.Api.vaccName().then(res => {//接口
          const nodes = Array.from(res.data).map(item => ({
            value: item.goodsCode,
            label: `${item.goodsName}`,
            leaf: level >= 1
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        await this.Api.vaccNameChild({ goodsCode: node.data.value }).then(
          res => {
            const nodes = Array.from(res.data).map(item => ({
              value: item.goodsCode,
              label: `${item.goodsName}`,
              leaf: level >= 1
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }
        );
      }
    },
   
     }
 }

二、第二种情况

 <el-cascader
   ref="cascader"
    clearable
    placeholder="请选择地区"
     :props="cascaderProps"
     v-model="areaCode"
     @change="selectCityChange"
     ></el-cascader>

export default {
  data() {
    return {
     cascaderProps: {
        checkStrictly: true,//每一级都可以选择，小圆圈
        lazy: true,
        lazyLoad: this.lazyLoad,
      }
    }
    },
    methods:{
            // 获取省市区
    lazyLoad(node, resolve) {
      console.log(node);
      let { level } = node;
      let params=''
      if(level==0){
        params='3200000000'//默认江苏省
      }else{
        params=node.value
      }
         this.Api.city({gbcode:params}).then(res=>{//接口
          if(res&&res.code==200){
            let data=[res.data]
            if(level>0){
              data=res.data.children
            }
            if(level==3){
                  data.forEach(item => {
                  item.leaf=level>=3
                   });
                }
              resolve(data);
           }else{
             this.$message.error('获取地区数据失败')
           }
       })
    },
    
  }

效果如下：

接口返回的数据：
点击江苏省返回的

点击无锡返回的：

//点击级联选择器label也可以选中
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -10px;
}
.el-cascader-panel .el-radio__input {
  // visibility: hidden; //隐藏单选框，不隐藏就不用设置
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}