展开数据自动展开

联级区划编辑回显

问题1

项目中会用到联级选择多级选择，因为联级数据量较大，选择了异步加载数据。每次加载选中一层的数据

提交的时候会提交每一层或者最后一层的节点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 })
            })

// 异步加载区划树
    onLoadData (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('数据加载失败')
          }
        })
      })
    }