问题
项目中会用到联级选择多级选择,因为联级数据量较大,选择了异步加载数据。每次加载选中一层的数据
提交的时候会提交每一层或者最后一层的节点id到后端保存,新增的时候很好实现,但是到了修改回显数据的时候处理起来就比较麻烦了,因为第一次只加载第一层的数据,下级数据没有加载,导致回显的时候匹配不上去,只会回显第一层的数据
思路
找到第一层对应的节点id,异步加载出对应的下一层数据,然后再找到第二层对应的节点id,加载出对应第二层下一层数据,依次类推,知道加载完所有层
实现
Api.districtList({ districtId: this.formData.districtId }).then(res => {
// res.data.districtIds 是正序的所有层级对应的id
res.data.districtIds.forEach((v,vindex) => {
// this.areaList 是区划数据list,初始化的是已经赋了第一层的数据
this.areaList.forEach((t,index) => {
// 找到第一层对应的节点,然后所有的处理都在这个节点依次往下
// res.data.districtIds[vindex + 1]判断有几层数据,如果只有两层则加载一次,多一层再多加载一次
if (res.data.districtIds[vindex + 1] && t.id === v) {
this.onLoadData([this.areaList[index]]).then(() => {
this.areaList[index].childNameList?.forEach((w, ind) => {
if (res.data.districtIds[vindex + 2] && w.id === res.data.districtIds[vindex+1]) {
this.onLoadData([this.areaList[index].childNameList[ind]]).then(() => {
this.areaList[index].childNameList[ind].childNameList.forEach((s,sindex) => {
if (res.data.districtIds[vindex+3] && s.id === res.data.districtIds[vindex+2]) {
this.onLoadData([this.areaList[index].childNameList[ind].childNameList[sindex]])
}
})
})
}
})
})
}
})
})
this.form = Object.assign(this.form, this.formData, { districtId: res.data.districtIds })
})
// 异步加载区划树
onl oadData (selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1]
return new Promise(resolve => {
implementationAPI.findLevelAllDistrict({ pid: targetOption.id }).then((res) => {
if (res.success) {
targetOption.childNameList = res.data.treeNodes
this.areaList = [...this.areaList]
resolve()
} else {
this.$message.error('数据加载失败')
}
})
})
}
标签:areaList,回显,res,id,联级,districtIds,data,选择器,加载
From: https://www.cnblogs.com/wang--chao/p/17171328.html