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

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

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

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

data(){const self = thisreturn{belongRegoinProps: {checkStrictly: true,lazy: true,lazyLoad(node, resolve) {self.getAreaForLazyLoad(node, resolve)}},//级联框prop}
}
methods:{
//获取编辑时的数据getAreaForLazyLoad(node, resolve) {const { level } = nodelet 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 = nullresolve()return}resolve(oData)}}).catch(err => { console.log(err) })},//处理数据格式，如不需要可以忽略formatAreaData(data, level) {return data.map(item => {item.names = formatLangData(item.languageList)item.value = item.iditem.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-cascaderref="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);