Tree树形组件选中后怎么获取完整路径？

Good“树涵提问于 2026-03-15 10:02:20 阅读 44

组件

我用的是Element Plus的Tree组件，现在点某个节点能拿到当前节点数据，但想拿到从根到该节点的完整路径数组，试了node.parent好像不行。

官方文档里没找到直接的方法，有没有人知道怎么递归往上找父节点啊？比如像getParentPath(node)这种。

const handleNodeClick = (data, node) => {
  console.log('当前节点:', data);
  // 想在这里拿到 ['root', 'parent', 'current'] 这样的路径
}

Tree树形导航组件

我来解答赞 11 收藏

反馈

2 条解答

爱学习的依诺 Lv1

应该能用递归往上找父节点，拼接路径。试试下面这个函数：

function getParentPath(node) {

  let path = [];

  function traverse(n) {

    if (n) {

      path.unshift(n.data.label);

      traverse(n.parent);

    }

  }

  traverse(node);

  return path;

}

在handleNodeClick里调用getParentPath(node)就能拿到路径数组了。

2026-03-23 20:10

诸葛梓涵 Lv1

Tree 节点确实有 parent 属性，可以递归往上找，你试的不行可能是写法问题。

直接上代码：

const handleNodeClick = (data, node) => {

  const path = []

  let current = node

  

  while (current) {

    path.unshift(current.data)  // 把当前节点数据放到数组开头

    current = current.parent    // 往上找父节点

  }

  

  console.log('完整路径:', path)

  // 输出类似: [{id: 1, label: 'root'}, {id: 2, label: 'parent'}, {id: 3, label: 'current'}]

}

或者如果你只要路径上的 label：

const pathLabels = []

let current = node

while (current) {

  pathLabels.unshift(current.data.label)

  current = current.parent

}

console.log(pathLabels)  // ['root', 'parent', 'current']

几个注意点：

node.parent 对根节点返回的是 null，所以 while 循环会自动停掉，不用担心死循环。

如果你想用 Tree 的方法，也可以通过 ref 调用 getNode(key) 获取节点实例后再往上找，但直接用事件回调里的 node 参数更直接。

还有一种方式是通过 default-expand-all 展开所有节点后，用 getCheckedKeys + getHalfCheckedKeys 配合 props 中的 checkStrictly 来搞，但你这个场景用 parent 递归最简洁。

2026-03-16 18:02