CheckBox多选框的基本用法是单独使用，可以表示两种状态之间的切换，标签上的内容是对CheckBox按钮的介绍
在el-checkbox元素中定义v-model绑定变量。 在单个checkbox中，默认绑定变量的值可以是Boolean、true或false。
模板！ -- `checked `为true或false-- El-checkbox v-model=' checked '选项/El-checkbox/templatescriptexportdefault { dault } ； /script效果图表如下所示：
状态禁用多选框不可选择的状态
只需设置禁用属性
模板El-checkbox v-model=' checked1' disabled备用选项1/El-checkbox El-checkbox v-model=' checked2' disabled备用选项}； /script效果图如下图所示：
“多选框组”适用于多个复选框绑定到同一数组的情况，表示是否选中该复选框中的一组选定项目。
checkbox-Group元素可以将多个checkbox作为组进行管理。 只需在组中使用v-model绑定阵列类型的变量。 el-checkbox的label属性是与该checkbox相对应的值，如果标记中没有任何内容，则还会充当checkbox按钮之后的说明。 label对应于数组中元素的值，如果有指定的值，则选择该值，否则不选择该值。
模板El-checkbox-groupv-model=' check list ' El-checkbox label='复选框a'/El-checkboxEl-checkboxlabel='复选框b ' El-checkbox El-checkbox label=' disabled/El-checkbox El-checkbox label 选择El-checkbox='禁用模板脚本端口默认值(数据) (返回) checklist: )、(选中并禁用)和(复选框a ) }； /script效果图表如下所示：
indeterminate状态indeterminate属性表示checkbox的不确定状态，通常用于实现所有选择的效果
template El-checkbox : indeterminate=' is indeterminate ' v-model=' check all ' @ change=' handlecheckalllchange ' divel-checkbox-groupv-model=' checked cities ' @ change=' handlecheckedcitieschange ' El-checkbox v-for=' city { 导出默认值(数据)返回)检查全部： false，checkedCities: [“上海”，“北京”，
cities: cityOptions, isIndeterminate: true }; }, methods: { handleCheckAllChange(val) { this.checkedCities = val ? cityOptions : []; this.isIndeterminate = false; }, handleCheckedCitiesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; } } };</script>效果图如下所示:
可选项目数量的限制
使用min和max属性能够限制可以被勾选的项目的数量
<template> <el-checkbox-group v-model="checkedCities" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> </el-checkbox-group></template><script> const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data() { return { checkedCities: ['上海', '北京'], cities: cityOptions }; } };</script>效果图如下图所示:
按钮样式
按钮样式多选组合。
只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外，Element还提供了size属性
<template> <div> <el-checkbox-group v-model="checkboxGroup1"> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup2" size="medium"> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup3" size="small"> <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div></template><script> const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data () { return { checkboxGroup1: ['上海'], checkboxGroup2: ['上海'], checkboxGroup3: ['上海'], checkboxGroup4: ['上海'], cities: cityOptions }; } }</script>效果图如hxddx所示:
带有边框
设置border属性可以渲染为带有边框的多选框
<template> <div> <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox> <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> </div> <div style="margin-top: 20px"> <el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox> <el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup1" size="small"> <el-checkbox label="备选项1" border></el-checkbox> <el-checkbox label="备选项2" border disabled></el-checkbox> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled> <el-checkbox label="备选项1" border></el-checkbox> <el-checkbox label="备选项2" border></el-checkbox> </el-checkbox-group> </div></template><script> export default { data () { return { checked1: true, checked2: false, checked3: false, checked4: true, checkboxGroup1: [], checkboxGroup2: [] }; } }</script>效果图如下图所示:
Checkbox Attributes 参数说明类型可选值默认值value/v-model绑定值string/number/boolean————label选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）string/number/boolean————true-label选中时的值string/number——
——
false-label没有选中的值string/number————disabled是否禁用boolean——falseborder是否显示边框boolean——falsesizeCheckBox的尺寸，仅在border为真时有效stringmedium/small/mini——name原生name属性string————checked当前是否勾选boolean——false indeterminate设置indeterminate状态，只负责样式控制boolean——false
CheckBox Events 事件名称说明回调函数change当绑定值变化时触发的
CheckBox-group Attributes 参数说明类型可选值默认值value/v-model绑定值array————size多选框组尺寸，仅对按钮形式的CheckBox或带有边框的CheckBox有效stringmedium/small/mini——disable是否禁用boolean——falsemin可被勾选的checkbox的最小数量number————max可被勾选的checkbox的最大数量number————text-color按钮形式的checkbox激活时的文本颜色string——#fffffffill按钮形式的checkbox激活时的填充色和边框色string——#409EFF
CheckBox-group Events 事件名称说明回调参数change当绑定值变化时触发的事件 更新后的值
CheckBox-button Attributes 参数说明类型可选值默认值label选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）string/number/boolean————true-label选中时的值string / number————false-label没有选中时的值string / number————disabled是否禁用boolean——falsename原生 name 属性string————checked当前是否勾选boolean——false