el-checkbox-group 如何获取当前点击选中的项
时间: 2023-06-09 13:02:09 浏览: 164
对于el-checkbox-group,你可以通过监听其change事件来获取当前选中的项。具体实现方式如下:
1. 在el-checkbox-group中绑定change事件,如下所示:
<el-checkbox-group v-model="checkedList" @change="handleChange">
<el-checkbox label="选项A"></el-checkbox>
<el-checkbox label="选项B"></el-checkbox>
<el-checkbox label="选项C"></el-checkbox>
</el-checkbox-group>
2. 在Vue实例中定义handleChange方法,该方法会在change事件触发时被调用,通过该方法可以获取当前选中的项,如下所示:
export default {
data() {
return {
checkedList: []
}
},
methods: {
handleChange(val) {
console.log(val); // 输出当前选中的项的值
}
}
}
在上述代码中,checkedList是el-checkbox-group的v-model绑定的值,它可以用来获取当前选中的项的值。handleChange方法的参数val就是当前选中的项的值,可以打印出来查看。
相关问题
el-checkbox-group 如何获取当前选中的项
您可以使用v-model来获取el-checkbox-group当前选中的项,例如:
```html
<el-checkbox-group v-model="checkedItems">
<el-checkbox label="item1"></el-checkbox>
<el-checkbox label="item2"></el-checkbox>
<el-checkbox label="item3"></el-checkbox>
</el-checkbox-group>
```
然后在Vue的data中定义checkedItems数组来存储当前选中的项:
```javascript
data() {
return {
checkedItems: []
};
}
```
当用户选择或取消选择某个项目时,checkedItems数组会自动更新。您可以在需要的地方访问checkedItems数组来获取当前选中的项。
vue el-checkbox-group 展示选中几个
在 Vue 中,你可以使用 `el-checkbox-group` 组件来展示选中的复选框个数。`el-checkbox-group` 是 Element UI 提供的一个多选框组件。
下面是一个示例代码:
```vue
<template>
<div>
<el-checkbox-group v-model="selectedOptions" @change="updateCount">
<el-checkbox label="Option 1"></el-checkbox>
<el-checkbox label="Option 2"></el-checkbox>
<el-checkbox label="Option 3"></el-checkbox>
<el-checkbox label="Option 4"></el-checkbox>
</el-checkbox-group>
<p>选中个数:{{ selectedOptions.length }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
};
},
methods: {
updateCount() {
// 更新选中个数
// this.selectedOptions 是一个数组,存储当前选中的复选框的值
},
},
};
</script>
```
在上面的示例中,我们使用了 `el-checkbox-group` 组件来包裹多个 `el-checkbox` 组件,并使用 `v-model` 来双向绑定选中的值,即 `selectedOptions` 数组。
当复选框的选中状态发生改变时,会触发 `@change` 事件,并调用 `updateCount` 方法来更新选中个数。通过 `selectedOptions.length` 可以获取当前选中的复选框个数,并在 `<p>` 元素中展示出来。
你可以根据自己的需求进行修改和定制化,比如更改复选框的选项和样式。