递归循环树节点及所有的父级链

原创已于 2024-07-16 16:01:00 修改 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui #tree

于 2021-04-30 15:10:10 首次发布

function封装专栏收录该内容

7 篇文章

订阅专栏

这段代码展示了如何在一个树形结构中通过递归方式查找指定ID的节点，并将该节点及所有上级父节点一并返回。输入数据是一个包含ID、名称、父ID和子节点的JSON对象数组，函数diguiTree遍历数据，找到目标节点并返回结果。

返回结果如图【可直接控制台打印】：
const result = diguiTree(tree, ‘2.1.1.1’， ‘id’)
代码

var tree = [
      {
        id: '1',
        name: 1,
        parentId: '0',
        children: [
          {
            id: '1.1',
            name: '1.1'
          },
          {
            id: '1.2',
            name: '1.2'
          },
          {
            id: '1.3',
            name: '1.3'
          }
        ]
      },
      {
        id: '2',
        parentId: '0',
        name: 2,
        children: [
          {
            id: '2.1',
            name: '2.1',
            parentId: 2,
            children: [
              {
                id: '2.1.1',
                name: '2.1.1',
                parentId: '2.1',
                children: [
                  {
                    id: '2.1.1.1',
                    name: '2.1.1.1',
                    parentId: '2.1.1',
                  }
                ]
              }
            ]
          },
          {
            id: '2.2',
            name: '2.2',
            parentId: 2
          } 
        ]
      },
      {
        id: '3',
        name: 3,
        parentId: '0'
      }
    ]

    function diguiTree(data, id, prop = 'id') {
      let end = []
      for (let i = 0; i < data.length ; i++) {
        const item = data[i]
        if (item[prop]== id) {
          end.push(item)
          break
        } else {
          if (item.children && item.children.length > 0) {
            const iend = diguiTree(item.children, id, prop)
            if (iend.length > 0) { // iend 是最后一级
              end.push(item)       // 把当前级筛进去
              end = [...end, ...iend]
              break
            }
          }
        }
      }
      return end
    }

    const result = diguiTree(tree, '2.1.1.1')
    console.log('result', result)