请教一下 这种数据结构需要怎样解决?

Question

题目描述

我现在自己写的代码

this.form.value.forEach((item,index)=>{
          let parentId
          if (index+1 === 1) {
            // 如果点击的是一级分类
            parentId = item
            this.options.map((items, indexs) => {
              if (items.addressNo === parentId && items.child.length === 0) {
                // 当顶级分类的的child为空时才请求数据
                this.request.post(this.api.get_systemAddress, {
                  level:index+2,
                  parentNo:parentId
                }).then(res => {
                  this.$set(this.options[indexs], 'child', res.data)
                  items.child.map((innerItem, innerIndex) => {
                    // 二级分类下必须要设置一个空的child数组，不然点击@active-item-change没反应
                    this.$set(items.child[innerIndex], 'child', [])
                  })
                })
              }
            })
          } else if(index+1 === 2){
            // 如果点击的是二级分类，则直接将三级分类绑定到platOptions
            parentId = item
            console.log('2级')
            this.options.map((items, indexs) => {
              items.child.map((innerItem, innerIndex) => {
                if (innerItem.addressNo === parentId && innerItem.child.length === 0) {
                  // 当二级分类的的child为空时才请求一次数据
                  this.request.post(this.api.get_systemAddress, {
                    level:index+2,
                    parentNo:parentId
                  }).then(res => {
                      this.$set(items.child[innerIndex], 'child', res.data)
                      innerItem.child.map((i,j)=>{
                        this.$set(innerItem.child[j],'child',0)
                      })
                  })
                }
              })
            })
          }
        })

后台请求的JSON数据
一级分类代码

{"result":true,"message":"SUCCESS","data":[{"id":"4028880d2fb99b9b012fba3ddd380002","addressNo":"root-6","addressName":"北京","isLeaf":0,"child":3,"level":1,"sort":1,"post":"100000","parentNo":"root"},{"id":"ff8080812fc36039012fc3f864c0031e","addressNo":"root-20","addressName":"广东省","isLeaf":0,"child":22,"level":1,"sort":2,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc3ea48cc0171","addressNo":"root-18","addressName":"河北省","isLeaf":0,"child":12,"level":1,"sort":5,"post":"9999992","parentNo":"root"},{"id":"ff8080812fc36039012fc405d1c204ec","addressNo":"root-24","addressName":"山西省","isLeaf":0,"child":11,"level":1,"sort":6,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc43cc05009c6","addressNo":"root-32","addressName":"河南省","isLeaf":0,"child":22,"level":1,"sort":7,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc42400a307c9","addressNo":"root-29","addressName":"辽宁省","isLeaf":0,"child":15,"level":1,"sort":8,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc3d224aa0003","addressNo":"root-9","addressName":"吉林省","isLeaf":0,"child":10,"level":1,"sort":9,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc3e6bae2010e","addressNo":"root-16","addressName":"黑龙江省","isLeaf":0,"child":13,"level":1,"sort":10,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc4135c380654","addressNo":"root-25","addressName":"内蒙古自治区","isLeaf":0,"child":22,"level":1,"sort":11,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc3febdc803f6","addressNo":"root-22","addressName":"江苏省","isLeaf":0,"child":15,"level":1,"sort":12,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc4251f6707f6","addressNo":"root-30","addressName":"山东省","isLeaf":0,"child":18,"level":1,"sort":13,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc4211eb50758","addressNo":"root-28","addressName":"安徽省","isLeaf":0,"child":17,"level":1,"sort":14,"post":"999999","parentNo":"root"},{"id":"ff8080812fc36039012fc414bfbf0665","addressNo":"root-26","addressName":"浙江省","isLeaf"

二级分类代码

{"result":true,"message":"SUCCESS","data":[{"id":"ff8080812fc36039012fc3f88e7c0326","addressNo":"root-20-1","addressName":"广州市","isLeaf":0,"child":18,"level":2,"sort":1,"post":"510000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc3f8b378032b","addressNo":"root-20-2","addressName":"韶关市","isLeaf":0,"child":11,"level":2,"sort":2,"post":"512000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc3f8cd45032c","addressNo":"root-20-3","addressName":"深圳市","isLeaf":0,"child":10,"level":2,"sort":3,"post":"518100","parentNo":"root-20"},{"id":"ff8080812fc36039012fc4001e730421","addressNo":"root-20-4","addressName":"珠海市","isLeaf":0,"child":5,"level":2,"sort":4,"post":"519000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc401a9b30451","addressNo":"root-20-5","addressName":"汕头市","isLeaf":0,"child":8,"level":2,"sort":5,"post":"515000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc402c0be047e","addressNo":"root-20-6","addressName":"佛山市","isLeaf":0,"child":5,"level":2,"sort":6,"post":"528000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc4038ade04a3","addressNo":"root-20-7","addressName":"江门市","isLeaf":0,"child":7,"level":2,"sort":7,"post":"529000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc404a07604bd","addressNo":"root-20-8","addressName":"湛江市","isLeaf":0,"child":12,"level":2,"sort":8,"post":"524000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc4061fbd04fb","addressNo":"root-20-9","addressName":"茂名市","isLeaf":0,"child":6,"level":2,"sort":9,"post":"525000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc4071fa60523","addressNo":"root-20-10","addressName":"肇庆市","isLeaf":0,"child":8,"level":2,"sort":10,"post":"526000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc40882d10564","addressNo":"root-20-11","addressName":"惠州市","isLeaf":0,"child":5,"level":2,"sort":11,"post":"516000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc409bb87058e","addressNo":"root-20-12","addressName":"梅州市","isLeaf":0,"child":10,"level":2,"sort":12,"post":"514000","parentNo":"root-20"},{"id":"ff8080812fc36039012fc40f0a14061

三级分类代码

{"result":true,"message":"SUCCESS","data":[{"id":"ff808081309b62c201309bcbb15a020d","addressNo":"root-20-3-80","addressName":"罗湖区","isLeaf":1,"child":1,"level":3,"sort":1,"post":"518000","parentNo":"root-20-3"},{"id":"ff8080812fc36039012fc3fe84c603f3","addressNo":"root-20-3-2","addressName":"福田区","isLeaf":1,"child":0,"level":3,"sort":2,"post":"518000","parentNo":"root-20-3"},{"id":"ff808081309b62c201309bc8dea601f0","addressNo":"root-20-3-3","addressName":"南山区","isLeaf":1,"child":0,"level":3,"sort":3,"post":"518000","parentNo":"root-20-3"},{"id":"ff8080812fc36039012fc3ffcc580414","addressNo":"root-20-3-5","addressName":"宝安区","isLeaf":1,"child":0,"level":3,"sort":5,"post":"518100","parentNo":"root-20-3"},{"id":"ff8080812fc36039012fc3fffc44041c","addressNo":"root-20-3-6","addressName":"盐田区","isLeaf":1,"child":0,"level":3,"sort":6,"post":"518000","parentNo":"root-20-3"},{"id":"408989be41b9c8fb0141b9dcd9640107","addressNo":"root-20-3-2-2","addressName":"光明新区","isLeaf":1,"child":0,"level":3,"sort":7,"post":"518000","parentNo":"root-20-3"},{"id":"4028808e69707687016970eb62dd0000","addressNo":"root-20-3-8","addressName":"坪山新区","isLeaf":1,"child":0,"level":3,"sort":8,"post":"518000","parentNo":"root-20-3"},{"id":"ff8080812fc36039012fc3fe54f603ef","addressNo":"root-20-3-1","addressName":"龙岗区","isLeaf":1,"child":2,"level":3,"sort":8,"post":"518100","parentNo":"root-20-3"},{"id":"4028808e69707687016970ec95520001","addressNo":"root-20-3-9","addressName":"大鹏新区","isLeaf":1,"child":0,"level":3,"sort":9,"post":"518000","parentNo":"root-20-3"}],"decorateData":null,"code":0,"nowTime":1669706413254} 

你期待的结果是什么？实际看到的错误信息又是什么？

我需要看到的结果

级联选择器的数据:["root-20”“root-20-3”"root-20-3-7"]
在这个遍历的过程中,我写的实在太复杂了 有没有好的方法解决一下里面的异步问题和数据结构问题

Answer 1

不太懂，点击是拿不到点击的元素吗，还要用forEach遍历？

Answer 2

这个不是有例子吗？为什么这么复杂

Answer 3

json数据不够全。
就写下思路吧。
后端返回一个总的json数据格式
然后前面有三个下拉款都联动的
list1 = result.data
list2 = list1[i]
list3 = list2[i]
思路在第一个下拉框点击的时候对list2进行赋值 后面依次类推