在用實際開發時使用element ui級聯選擇器遇到通過點選一級的下拉選項去動態獲取二級下拉選項.以此記錄:

使用:

<el-cascader :props="props" v-if="showSelect" placeholder="請選擇" v-model="doctorValue" style="width:90%;" />

定義變數以及設定:

data() {
      return {
        doctorValue:[]
        props: {
          //checkStrictly: true,// 父子節點是否互相關聯,其餘配置見官網
          lazy: true
 
,
          lazyLoad: this.lazyLoad
        }
      };
    },

點選動態載入:

lazyLoad(node, resolve) {
        setTimeout(() => {
          this.getHospital(node, resolve)
        }, 50)
      },
      getHospital(node, resolve) {
        // 第一級
　　　　　// this.hospitalData 是提前介面獲取的一級下拉框

        if (node.level == 0) {
          const nodess 
 
=this.hospitalData.map((i, index) => ({
            value: i.id,
            label: i.hospitalName,
          }))
          resolve(nodess);
        }
        // 第二級
        if (node.level == 1) {
          let data = {
            hospitalId: node.data.value,
            sortType: "default"
          };
          getDoctorsByHospital(data).then(res 
 
=> {
            // console.log(res)
            const nodes = res.data.map((item, index) => ({
              value: item.id,
              label: item.doctorName,
              leaf: node.level >= 1
　　　　　　　　　// 節點數,我的只有二級,設定之後點選二級不再出現載入圈

            }));
            resolve(nodes);
          })
        }
      },

第二次進來以後,並不能正確回顯,查詢資料後,在會顯示時,重新渲染級聯選擇器的方法最簡單

this.doctorValue = [res.data.hospitalId, res.data.doctorId]
this.showSelect = false
setTimeout(() => {
  this.showSelect = true
 }, 50)