需要：每抉择一级都间接获取以后值（而且是动静加载子集合）
呈现问题：当第一次加载子集合时候，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>