el-tree怎么实现点击一个树的节点获取其所在树的所有父节点
时间: 2024-03-27 14:40:21 浏览: 59
要实现这个功能,可以使用 el-tree 的 node-click 事件和 getNodeByKey 方法。代码示例如下:
```html
<template>
<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级节点',
children: [
{
id: 2,
label: '二级节点',
children: [
{
id: 3,
label: '三级节点'
}
]
}
]
}
]
}
},
methods: {
handleNodeClick(node) {
const parentNodes = []
let parentNode = this.$refs.tree.getNodeByKey(node.parent.id)
while (parentNode) {
parentNodes.unshift(parentNode)
parentNode = this.$refs.tree.getNodeByKey(parentNode.parent.id)
}
console.log(parentNodes)
}
}
}
</script>
```
在 handleNodeClick 方法中,先定义一个空数组 parentNodes 用于存储所有父节点。然后使用 getNodeByKey 方法获取当前节点的父节点,再通过 while 循环不断获取父节点的父节点,直到根节点为止。最后将所有的父节点按层级顺序存入 parentNodes 数组中。
阅读全文