android多级联选择显示 级联选择器多选回显

联级区划编辑回显

问题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('数据加载失败')
          }
        })
      })
    }

多级table刷新之后展开原有分支

问题2

多级数据表格，调整路由编辑之后，返回该表格，需要重新请求列表数据，并保持之前的展开项展开
虽然给页面做缓存，按时返回之刷新列表之后，已展开的节点不会自动展开，需要手动展开

思路

1. 循环遍历所有节点，找到对应的id，这个就是问题1的解决方法
2. 给之前的展开节点添加标识，然后通过标识找到对应的元素，触发元素的点击事件

实现

这里采用第二种方法来实现

具体的就是在展开的图标上面加一个claas

下次需要自动展开时，获取到这个些元素触发它的click方法。这里用的延时器，后续可以优化改成遍历