基础用法
在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true
禁用状态
设置disabled属性即可。
多选框组
checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
ndeterminate 状态
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
按钮样式
只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外，Element 还提供了size属性。
带有边框
设置border属性可以渲染为带有边框的多选框。
代码：
<template><div class="checkbox"><!-- `checked` 为 true 或 false --><el-checkbox v-model="checked">可选备选项</el-checkbox><el-checkbox v-model="checked1" disabled>不可选备选项1</el-checkbox><el-checkbox v-model="checked2" disabled>不可选备选项2</el-checkbox><el-checkbox-group v-model="checkList" ><el-checkbox label="多选框A"></el-checkbox><el-checkbox label="多选框B"></el-checkbox><el-checkbox label="多选框C"></el-checkbox><el-checkbox label="禁选" disabled></el-checkbox><el-checkbox label="禁选并选中" disabled></el-checkbox></el-checkbox-group><p><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox></el-checkbox-group></p><p><el-checkbox-group v-model="checkedCities1":min="1":max="2"><el-checkbox v-for="city1 in cities1" :label="city1" :key="city1">{{ city1 }}</el-checkbox></el-checkbox-group></p><p><el-checkbox-group v-model="checkboxGroup1" size="medium" fill="pink" text-color="red"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button></el-checkbox-group></p><p><el-checkbox-group v-model="checkboxGroup2" size="small"><el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '上海'" :key="city">{{ city }}</el-checkbox-button></el-checkbox-group></p><p><el-checkbox-group v-model="checkboxGroup3" size="mini" disabled><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button></el-checkbox-group></p><p><el-checkbox v-model="checked3" label="备选框A" border size="medium"></el-checkbox><el-checkbox v-model="checked4" label="备选框B" border></el-checkbox><!-- 边框 --></p><p><el-checkbox-group v-model="checkboxGroup4" size="small"><el-checkbox label="备选框C" border ></el-checkbox><el-checkbox label="不可选备选框C" border disabled></el-checkbox></el-checkbox-group></p><p><el-checkbox-group v-model="checkboxGroup5" size="mini" disabled><el-checkbox label="备选项D" border></el-checkbox><el-checkbox label="备选项E" border></el-checkbox></el-checkbox-group></p></div>
</template><script>const cityOptions = ['上海', '北京', '广州', '深圳'];export default {data () {return {checked:true,checked1: false,checked2: true,checkList:['多选框A','禁选并选中'],//多选选中上海北京checkAll: false,checkedCities: ['上海', '北京'],cities: cityOptions,isIndeterminate: true,checkedCities1:['广州','深圳'],cities1:cityOptions,checkboxGroup1:['上海'],checkboxGroup2:['北京'],checkboxGroup3:['广州'],checked3: true,checked4: false,checkboxGroup4: [],checkboxGroup5: ['备选项D']};},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>
