el-cascader组件返回值处理成树形结构_el-cascader反显时后端树发生变化-优快云博客

文章讲述了如何将el-cascader组件的多层ID数组通过Map数据结构转换成树形结构的JSON对象，以满足后端接口的数据需求。使用了三层嵌套循环来构建树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-cascader 三层树结构
change事件回调值为

   [
      [10000, 10001, 10067],
      [10000, 10001, 10069],
      [10000, 10003, 10071],
      [10004, 10006, 10075]
    ]

每个数组第一个元素为一级id，第二个为二级id，第三个是三级id；

保存后端接口需要处理为树形结构数据

[
      {
        id: 10000,
        child: [
          { 
            id: 10001,
            child: [ { id: 10067, child: [] }, { id: 10069, child: [] },]
          },
          {
            id: 10003,
            child: [ { id: 10071, child: [] } ]
          }
        ]
      },
      {
        id: 10004,
        child: [
          {
            id: 10006,
            child: [{ id: 10075, child: [] }]
          }
        ]
      }
    ]

方法记录

 let map333 = new Map()
    arr.forEach(item => {
      if (!map333.has(item[0])) {
        map333.set(item[0], new Map())
      }
      if (!map333.get(item[0]).has(item[1])) {
        map333.get(item[0]).set(item[1], new Map())
      }
      if (!map333.get(item[0]).get(item[1]).has(item[2])) {
        map333.get(item[0]).get(item[1]).set(item[2], new Map())
      }
    })

先用map处理一遍结构，再来个三重循环搞定

 let paramsList = []
    for (let [key, value] of map333) {
      let obj1 = { id: key,child: [] }
      if (value.size > 0) {
        for (let [key2, value2] of value) {
          let obj2 = {id: key2, child: [] }
          if (value2.size > 0) {
            for (let [key3, value3] of value2) {
              console.log(key3, value3);
              let obj3 = {id: key3,child: []}
              obj2.child.push(obj3)
            }
          }
          obj1.child.push(obj2)
        }
        paramsList.push(obj1)
      }
    }
    console.log(paramsList, 'paramsList2');