在el-tree中,点击子节点如何获取该节点的所有父节点,并将所有父节点按照顺序存入数组中,该数组中也要包含被点击的子节点本身
时间: 2024-04-09 17:33:09 浏览: 113
在 el-tree 中,可以通过 `node-click` 事件来获取点击的子节点以及其所有父节点,并将它们按顺序存入数组中。以下是一个示例代码:
```html
<template>
<el-tree
:data="data"
node-key="label"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
}
]
}
]
},
{
label: '一级 3',
children: [
{
label: '二级 3-1',
children: [
{
label: '三级 3-1-1'
}
]
},
{
label: '二级 3-2',
children: [
{
label: '三级 3-2-1'
}
]
}
]
}
]
};
},
methods: {
handleNodeClick(nodeData) {
const parents = this.getNodeParents(nodeData);
console.log(parents);
},
getNodeParents(node) {
const parents = [];
let currentNode = node;
while (currentNode) {
parents.unshift(currentNode.label);
currentNode = currentNode.parent;
}
return parents;
}
}
};
</script>
```
在这个示例代码中,我们在 el-tree 上监听了 `node-click` 事件,并在事件处理方法 `handleNodeClick` 中调用了 `getNodeParents` 方法来获取父节点数组。`getNodeParents` 方法使用了一个 while 循环来逐级获取父节点,将它们按顺序存入 `parents` 数组中。最终,我们在控制台输出了 `parents` 数组。
注意:这里的 `data` 是 el-tree 的数据源,你可以根据自己的实际情况进行修改。
阅读全文