Elementui el-cascader组件动态获取接口数据及其刷新问题

一.cascader组件调用接口动态获取数据

<el-cascader
  ref="areaSelect"
  v-if="isShowAddressInfo"
  v-model="ruleForm.belongName"
  :show-all-levels="true"
  :props="belongRegoinProps"
  :placeholder="''"
  @change="belongRegionChange"
  clearable/>

data中绑定prop的值（获取接口数据）

data(){
    const self = this
    return{
      belongRegoinProps: {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          self.getAreaForLazyLoad(node, resolve)
        }
      },//级联框prop
    }
}
methods:{
//获取编辑时的数据
    getAreaForLazyLoad(node, resolve) {
      const { level } = node
      let data = {}
      if (level == 0) {
        data = {
          categoryIds: 2,
          pid: 0
        }
      } else if (level == 1) {
        data = {
          categoryIds: 3,
          pid: node.value
        }
      } else {
        data = {
          pid: node.value
        }
      }
      getAreaData(data).then(res => {
        // console.log(res.data)
        if (res.data.status == 0) {
          let oData = this.formatAreaData(res.data.data, level)
          // console.log('oKdata', oData)
          if (oData.length == 0) {
            // console.log('子节点数据为空', node)
            node.syncCheckState(node.value)
            const checkedNode = this.$refs.areaSelect.getCheckedNodes()
            // console.log('获得刚才选中的节点', checkedNode)
            // node.syncCheckState(node.value)
            // node.doCheck(true)
            // this.$set(node, 'leaf', true)
            oData = null
            resolve()
            return
          }
          resolve(oData)
        }
      }).catch(err => { console.log(err) })
    },
    //处理数据格式，如不需要可以忽略
     formatAreaData(data, level) {
      return data.map(item => {
        item.names = formatLangData(item.languageList)
        item.value = item.id
        item.label = item.names[this.language] ? item.names[this.language].name : '-'
        item.leaf = this.level > 0 ? (level >= this.level || item.isleaf == 2) : (false             
        || item.isleaf == 2) // 如果启用数据库的叶子节点，添加上：（|| !!item.isleaf）
        return item
      })
    },
}

二.cascader组件刷新问题

1.cascader  是定义的ref="cascader"，如果单独封装组件，可以在父级组件中传值（ps:reloadData），通过watch监听reloadData的值是否变化，动态执行以下代码实现功能刷新

this.$refs.cascader.panel.lazyLoad();

2.如果在页面中直接使用

<el-cascader
  ref="areaSelect"
  v-if="isShowAddressInfo"
  v-model="ruleForm.belongName"
  :show-all-levels="true"
  :props="belongRegoinProps"
  :placeholder="''"
  @change="belongRegionChange"
  clearable/>

可以通过判断isShowAddressInfo变量实现刷新

this.isShowAddressInfo=false;
setTimeout(() => {
  this.isShowAddressInfo = true;
}, 300);