需求：每选择一级都直接获取当前值（而且是动态加载子集合）
出现问题：当第一次加载子集合时候，value 没有立即变化。@on-change 事件也没有监听到变化。
例如：
代码监听：
回调方法：
加载子集合
解决方法：手动修改 value 值
全部代码：
<template>
<Cascader :value="value"
:data="data4"
:load-data="loadData"
change-on-select
style="width:200px"
@on-change='func_change'></Cascader>
</template>
<script>
import * as api from '@/api/client-crm'
export default {
name: '',
props: {
value: {type: [Array],
default: () => {return []
}
},
},
data () {
return {
loading: false,
data4: [],}
},
created () {this.func_getCountries()
},
methods: {
// 国家
func_getCountries () {
this.loading = true;
api.getCountries().then(res => {console.log(res)
if (res.code === 0) {let data = []
res.result.forEach(element => {
data.push({
level: 1,
id: element.id,
value: element.country,
label: element.country,
children: [],
loading: false
})
});
this.data4 = data
console.log(this.data4);
}
}).finally(() => {this.loading = false;})
},
// 省
func_getProvinces (id) {
this.loading = true;
let params = {countryId: id}
return api.getProvinces(params)
},
// 区
func_getCities (id) {
this.loading = true;
let params = {provinceId: id}
return api.getCities(params)
},
// 动态加载
async loadData (item, callback) {
item.loading = true;
let data = []
if (item.level === 1) {
// 在加载时候，不会触发，func_change 方法，所以手动返回
this.value[0] = item.value
let res = await this.func_getProvinces(item.id)
res.result.forEach(element => {
data.push({
level: 2,
id: element.id,
value: element.province,
label: element.province,
children: [],
loading: false
})
});
} else if (item.level === 2) {
// 在加载时候，不会触发，func_change 方法，所以手动触发
this.value[1] = item.value
let res = await this.func_getCities(item.id)
res.result.forEach(element => {
data.push({
level: 3,
id: element.id,
value: element.city,
label: element.city
})
});
}
item.children = data
item.loading = false;
// 手动触发
this.func_change(this.value)
callback()},
// 选择变化
func_change (val) {console.log('地区：', val);
this.$emit('input', val)
}
}
}
</script>
<style scoped>
</style>