Vue里定义方法：通过子节点ID查找所有关联的父节点ID

最新推荐文章于 2024-05-31 18:07:42 发布

原创最新推荐文章于 2024-05-31 18:07:42 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java #vue.js #js

学习篇专栏收录该内容

36 篇文章

订阅专栏

这段代码实现了一个功能，从给定的树形数据结构中，通过子节点ID找出所有关联的父节点ID。它使用了递归方法将树结构展平，然后遍历找到指定节点及其所有父节点的ID。示例数据和调用展示了如何从节点5追溯到其所有父节点，得到结果[1,2,4,5]。

// 通过子节点ID查找所有关联的父节点
    getTreeIds(tree, nodeId, config){
      const { children = 'children', id = 'id' } = config || {};
      const toFlatArray = (tree, parentId) => {
        return tree.reduce((t, _) => {
          const child = _[children]
          return [
            ...t,
            parentId ? { ..._, parentId } : _,
            ...(child && child.length ? toFlatArray(child, _[id]) : [])]
        }, [])
      };
      const getIds = flatArray => {
        let ids = [nodeId]
        let child = flatArray.find(_ => _[id] === nodeId)
        while (child && child.parentId) {
          ids = [child.parentId, ...ids]
          child = flatArray.find(_ => _[id] === child.parentId)
        }
        return ids
      }
      return getIds(toFlatArray(tree))
    }
// 数据
data(){
  return {
    treeData: [
      {
        id: 1,
        label: 'test1',
        children: [
          {
            id: 2,
            label: 'test1-1',
            children: [
              {
                id: 3,
                label: 'test1-1-1'
              },
              {
                id: 4,
                label: 'test1-1-2',
                children: [
                  {
                    id: 5,
                    label: 'test1-1-1-1'
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
// 调用
   let arr = this.getTreeIds(this.treeData, 5); // arr的值为[1, 2, 4, 5]