级联选择器回显 - 子节点反查各父级节点

原创已于 2023-06-20 12:47:31 修改 · 393 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-06-20 12:14:56 首次发布

文章介绍了在管理后台使用多级选择器时遇到的问题，即仅保存子ID但需初始化全路径。为了解决这个问题，提出了一个递归方法来查找并返回从根到指定子ID的所有父ID。该方法通过遍历多级数组结构，实现了从ID到包含所有上级ID的数组的转换。

应用场景

管理后台使用多级选择器，上送最终子id入库，后续预览后端只返回子id，无法进行多级选择器初始化

实现原理

使用递归子id查询方法，魔改记录各级父id。代码如下

// 数组反查递归
findId (array, id, arr) {
  for (let i = 0; i < array.length; i++) {
    if (array[i].id=== id) {
      arr.unshift(array[i].id) // 插入子id
      return array[i];
    } else if (Array.isArray(array[i].children)) {
      const result = this.findId(array[i].children, id, arr);
      if (result) {
        arr.unshift(array[i].id) // 递归，依次插入父级id到数组头
        return result;
      }
    }
  }
  return null;
},
// 多级数组反查记录并返回
findIdList (array, id) {
  return new Promise(resolve => {
    var arr = []
    this.findId(array, id, arr)
    resolve(arr)
  })
},

示例

const data = [
  {
    id: 1,
    children: [
      {
        id: 2,
        children: [
          {
            id: 3
          },
          {
            id: 4
          }
        ]
      },
      {
        id: 5
      }
    ]
  },
  {
    id: 6,
    children: [
      {
        id: 7
      },
      {
        id: 8
      }
    ]
  }
];

const temp = await this.findIdList(data, 4)
console.log(temp) // [1,2,4]