在 Element UI 的 Tree 组件中,你可以通过 node-click
事件来监听用户点击树形节点的操作,并在事件处理函数中递归获取当前选中节点及其父节点的相关信息,包括节点的 label
和 key
等属性。
以下是通过 node-click
事件来递归获取当前选中节点及其父节点的 label
信息的代码示例:
<template>
<el-tree
:data="treeData"
:props="treeProps"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: 'Node 1',
children: [
{
label: 'Node 1-1'
},
{
label: 'Node 1-2'
}
]
},
{
label: 'Node 2',
children: [
{
label: 'Node 2-1'
},
{
label: 'Node 2-2'
}
]
}
],
treeProps: {
label: 'label'
}
}
},
methods: {
handleNodeClick(node) {
let labels = [];
this.traverseNode(node, labels);
console.log(labels.join(' > ')); // 输出当前选中节点及其父节点的 label 值
},
traverseNode(node, labels) {
labels.unshift(node.label); // 将当前节点的 label 值插入到数组最前面
if (node.parent) {
this.traverseNode(node.parent, labels);
}
}
}
}
</script>
在上述代码中,我们在 <el-tree>
组件上绑定了 node-click
事件,并在该事件处理函数 handleNodeClick
中递归调用了 traverseNode
方法来获取当前选中节点及其父节点的 label
值,并将这些值保存在一个数组中。
在 traverseNode
方法中,我们首先将当前节点的 label
值插入数组最前面,然后判断该节点是否有父节点。若有,则对父节点递归调用 traverseNode
方法以获取其父节点及其父节点的 label
值,并将这些值插入数组最前面。
最终,我们通过 console.log(labels.join(' > '))
将数组中的所有元素组合成一个字符串输出。需要注意的是,我们使用 join
方法将数组中的元素用 >
符号连接起来,以显示当前选中节点及其父节点的层级关系。