<el-checkbox-group 全选
时间: 2025-01-08 09:09:07 浏览: 6
`<el-checkbox-group>` 是Element UI库中的一个组件,它允许用户选择一组复选框,并提供全选/取消全选的功能。这个组件通常用于需要用户批量选择项目的场景,比如在表格或列表中,你可以创建一个`el-checkbox-group`,然后给每个选项添加`el-checkbox`,当点击“全选”按钮时,会同步勾选所有`el-checkbox`的状态;反之,点击“取消全选”则会清除所有选中的状态。在Vue.js应用中,你可以在模板中绑定数据,通过`v-model`指令控制数据与组件间的双向数据绑定。
```html
<template>
<el-checkbox-group v-model="selectedItems">
<el-checkbox :label="item" v-for="(item, index) in options" :key="index"></el-checkbox>
</el-checkbox-group>
<button @click="selectAll">全选</button>
<button @click="clearAll">取消全选</button>
</template>
<script>
export default {
data() {
return {
selectedItems: [], // 存储选中的项
options: [...], // 选项数组
};
},
methods: {
selectAll() {
this.selectedItems = this.options;
},
clearAll() {
this.selectedItems = [];
}
}
};
</script>
```
阅读全文