1、定位原因:懒加载的级联下拉框无法回显是因为,只绑定了model的值,没有options的数据支撑的话,获取不到节点的内容导致;
2、方案:拿到选中的项的时候,用这些值去递归循环获取相应的节点的一些属性,赋值给options,然后注意最后一个节点的leaf属性一定要有且是true了才可以回显;
// 获取市级地址选项
async getTwoData(arr, level) {
const Array = this.addressList
for (let i = 0, len = Array.length; i < len; i++) {
if (Array[i].value === arr[0]) {
// 判断是否已获取市级地址
if (this.twoValue.indexOf(arr[0]) === -1) {
this.twoValue.push(arr[0])
const nodes = await this.getCitiesByRegionIdData(1, arr[0])
this.$set(this.addressList[i], 'children', [...nodes])
}
// 判断是否为三级地址
if (level == 3) {
setTimeout(() => {
this.getThreeData(arr, 2, i)
}, 300)
}
return
}
}
},
// 获取县(区)级地址选项
async getThreeData(arr, level, val) {
for (let i = 0, len = this.addressList[val].children.length; i < len; i++) {
if (this.addressList[val].children[i].value === arr[1]) {
// 判断是否已获取过县级地址
if (this.threeValue.indexOf(arr[1]) === -1) {
this.threeValue.push(arr[1])
const nodes = await this.getCountiesByRegionIdData(level, arr[1])
this.$set(this.addressList[val].children[i], 'children', [...nodes])
console.log('lll', this.addressList[val]);
}
return
}
}
},
// 懒加载方法
cascaderProps() {
return {
multiple: true,
checkStrictly: true,
lazy: true,
lazyLoad: async (node, resolve) => {
let nodes = []
const { level, value } = node
if (level > 2) {
resolve()
return
}
if (level === 0) {
nodes = await this.getProvincesData(level)
}
else if (level === 1&&this.twoValue.indexOf(value) ===-1) {
nodes = await this.getCitiesByRegionIdData(level, value)
} else if (level === 2&&this.threeValue.indexOf(value) ===-1) {
nodes = await this.getCountiesByRegionIdData(level, value)
}
// console.log('nodes',nodes);
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes)
},
}
},
省市县同一方法不同请求
// 获取省的地址
async getProvincesData(level) {
// console.log('level', level);
try {
const res = await getProvinces({})
if (res.code === 0) {
this.addressList = (res.returnData || []).map((item) => ({
label: item.regionName,
// 值的id
value: item.regionId,
leaf: level >= 2,
}))
}
} catch (error) {
console.error(error, '--err')
}
return this.addressList
},