el-tree-select 事件
时间: 2024-12-26 13:19:42 浏览: 4
### 关于 `el-tree-select` 组件支持的事件及其使用
#### 事件列表和支持的方法
对于 `el-tree-select` 组件而言,其提供了多种用于响应用户交互行为的事件来增强用户体验。以下是该组件所支持的主要事件:
- **change**
当绑定值变化时触发此事件,在多选模式下会返回一个数组;而在单选模式则只返回当前选项对应的值[^1]。
```javascript
@change="handleChange"
methods: {
handleChange(value) {
console.log('Selected node:', value);
}
}
```
- **check-change**
每当节点被勾选或取消勾选时触发,参数依次为:传递给 `data` 属性的数组中该节点所对应的对象、表示该节点本身是否被选中的布尔值以及子树范围内目前已被选中的节点组成的数组。
```html
<el-tree-select
...
@check-change="handleCheckChange">
</el-tree-select>
<script>
export default {
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(`Node ${data.label} is now ${checked ? 'checked' : 'unchecked'}`);
}
}
};
</script>
```
- **node-click**
点击节点时触发,可以用来处理更复杂的逻辑需求,比如展开/折叠指定分支等操作。
```html
<el-tree-select
...
@node-click="handleNodeClick">
</el-tree-select>
<script>
export default {
methods: {
handleNodeClick(data) {
alert(`You clicked on the node named "${data.label}"`);
}
}
};
</script>
```
这些事件允许开发者灵活地捕捉并响应用户的输入动作,从而实现更加动态和互动性强的应用界面设计。
阅读全文