element中的树形组件,如何获取父级菜单的id
时间: 2023-11-28 12:47:32 浏览: 135
vue elementUI tree树形控件获取父节点ID的实例
在Element中的树形组件中,可以通过监听节点被选中的事件 `node-click` 来获取当前被选中的节点信息。其中节点信息包括节点的数据对象以及节点的层级信息。通过遍历节点的层级信息,即可获取当前节点的父级节点信息,从而得到父级菜单的id。
下面是一个示例代码:
```html
<template>
<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '菜单1',
children: [
{
id: 2,
label: '子菜单1'
},
{
id: 3,
label: '子菜单2'
}
]
},
{
id: 4,
label: '菜单2',
children: [
{
id: 5,
label: '子菜单3'
},
{
id: 6,
label: '子菜单4'
}
]
}
]
}
},
methods: {
handleNodeClick(data) {
let parentIds = []
let node = data.parent
while (node) {
parentIds.unshift(node.data.id)
node = node.parent
}
console.log('当前节点信息:', data)
console.log('父级菜单的id:', parentIds)
}
}
}
</script>
```
在上面的代码中,当节点被选中时会触发 `handleNodeClick` 方法。在该方法中,首先遍历节点的层级信息,将所有父级节点的id保存到 `parentIds` 数组中,最后打印出来即可。
阅读全文