选中el-tree check选中子节点时获取父节点
时间: 2024-09-20 20:03:00 浏览: 54
在Vue的Element UI库中,`el-tree`组件用于创建树形结构的数据展示,并提供了checkbox功能。当你想要在用户点击子节点并勾选时获取其父节点的信息,可以利用`node-click`或`check`事件。下面是一个简单的例子:
首先,在你的`el-tree`组件上绑定这两个事件处理函数:
```html
<el-tree
:data="treeData"
node-key="id"
ref="treeRef"
@node-click="handleNodeClick"
@check="handleCheck"
>
</el-tree>
```
然后在你的组件中定义这两个方法:
```javascript
export default {
methods: {
handleNodeClick(node) {
if (node.parent) { // 如果有父节点
this.handleParentNode(node.parent); // 获取并处理父节点数据
}
},
handleCheck(node, checked) {
if (checked && node.parent) { // 当子节点被选中
this.handleParentNode(node.parent);
}
},
handleParentNode(parentNode) {
console.log('父节点:', parentNode); // 这里你可以做你需要的操作,如更新状态或发送请求等
// 父节点数据可能是这样:
// {
// id: 'parent_id',
// name: '父节点名称'
// }
}
}
}
```
这样,当用户选择子节点时,`handleCheck`会被触发,如果检测到有父节点,就会进一步调用`handleParentNode`来处理父节点信息。
阅读全文