Element ui Cascader 级联选择器动态回显

<template>
<el-cascader
                v-if="typelist.length>0"
                ref="cascaderAddr"
                :key="modalKey"
                v-model="ruleForm.classId"
                :show-all-levels="false"
                placeholder="请选择药品分类"
                clearable
                :options="typelist"
                :props="props"
                @change="changecascader"
              />
</template>

<script>
import { getClasses, getOTCClasses, getUnits } from '@/api/common'
import { addDrug, findDrug, updateDrug, selectDrugStoreInfo } from '@/api/drugs'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      modalKey: 0,
      options: [],
      props: {
        value: 'classId',
        label: 'name',
        children: 'children',
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          if (node.data.classId) {
            getClasses({ parentId: node.data.classId }).then(res => {
              if (Number(res.code) === 0) {
                resolve(res.data)
              } else {
                resolve(null)
              }
            })
          } else {
            resolve(null)
          }
        }
      }
    }
  },
  created() {
    const that = this
    this.$nextTick(function() {
      if (that.drugid !== 0) {
        that.findDrug()
      }
    })
  },
  methods: {
    changecascader(e) {
      const that = this
      setTimeout(function() {
        that.$refs.cascaderAddr.toggleDropDownVisible()
      }, 500)
    },
    // 获取详情
    findDrug() {
      findDrug({ id: this.drugid }).then(res => {
        if (Number(res.code) === 0) {
          this.ruleForm = res.data
          this.fn2()
        }
      })
    },
    // 同步组装数据
    async fn2() {
    // this.ruleForm.classTree为接口拿到的已选择id组
      for (var i = 0; i < this.ruleForm.classTree.length; i++) {
        var item = this.ruleForm.classTree[i]
        var data = await (function() {
          return new Promise(function(res, rej) {
            var resdata = axios.get(process.env.VUE_APP_BASE_API + '/common/classes',
              {
                params: { parentId: item.classId },
                headers: {
                  'Authorization': getToken()
                }
              })
            res(resdata)
          })
        }())
        if (Number(data.data.code) === 0) {
          if (item.classId === 0) {
            this.typelist = data.data.data
          } else {
            if (data.data.data.length > 0) {
              this.getItemchildren(this.typelist, item.classId, data.data.data)
            }
          }
        }
        // key必须加上，才能重新渲染组件
        this.modalKey++
      }
    },
    // 递归遍历循环赋值分类列表数据
    getItemchildren(childrenData, classId, resData) {
      return new Promise((resolve, reject) => {
        if (childrenData.length > 0) {
          childrenData.forEach(childrenItem => {
            if (childrenItem.classId === classId) {
              childrenItem.children = resData
            } else {
              if (childrenItem.children) {
                this.getItemchildren(childrenItem.children, classId, resData)
              }
            }
          })
        }
      })
    },
  }
}
</script>