element ui cascader级联选择器 动态加载以及回显

在用实际开发时使用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)