el-tree勾选节点后触发事件
时间: 2024-10-30 20:05:48 浏览: 91
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
在Element UI的`el-tree`组件中,当用户点击节点并使其被选中时,可以利用内置的事件来监听这个操作。其中主要涉及两个事件:
1. `check` 事件:这是树节点检查状态改变时触发的事件,包括节点被选中(checked)或取消选中(unclicked)。示例代码如下:
```javascript
<el-tree
:data="treeData"
@check="handleCheck"
></el-tree>
methods: {
handleCheck(node) {
// 当节点被选中,这里可以获取到node的信息并处理
console.log('Node checked:', node);
}
}
```
2. `on-check` 事件:这是一个自定义的事件处理器,它会在单个节点的状态更改时触发。你可以在这里添加更详细的业务逻辑:
```javascript
<el-tree
:data="treeData"
@on-check="customHandleCheck"
></el-tree>
methods: {
customHandleCheck(node, type, status) {
// type 可能的值有 'checkbox', 'radio',status 通常为 true 或 false
// 这里可以根据type 和 status 来做相应的处理
console.log('Custom check event:', { node, type, status });
}
}
```
在这些事件中,你可以通过`node`对象获取选中的节点信息,如ID、属性等,并执行你需要的操作。
阅读全文