vue el-checkbox-group 展示选中几个
时间: 2023-08-14 10:10:12 浏览: 193
在 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>` 元素中展示出来。
你可以根据自己的需求进行修改和定制化,比如更改复选框的选项和样式。
阅读全文
相关推荐

















