1. 用途
多选框用来从备选的选项中选择任意多个，0个或者全部均可。
注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。
2. 普通多选框
普通多选框v-model绑定一个变量，变量的值为true/false分别对应选中/未选中，示例如下：
HTML代码：
普通多选框：
<el-checkbox v-model="checkedBasketball">篮球</el-checkbox>
<el-checkbox v-model="checkedFootball">足球</el-checkbox>
<el-divider></el-divider>
JS代码：
checkedBasketball: true,
checkedFootball: false,
效果如下：
3. 带边框的多选框
带边框的多选框样式更加富有科技感，但是用法是一样的。HTML代码部分添加border属性即可：
带边框的多选框:
<el-checkbox v-model="checkedBasketball" border>篮球</el-checkbox>
<el-checkbox v-model="checkedFootball" border>足球</el-checkbox>
4. 多选框组
如果选项过多，每个多选框对应一个变量非常不方便，可以使用多选框组，统一绑定一个变量。变量的值即为选中项的label值的集合。
多选框组，选中项{{checkList}}
<el-checkbox-group v-model="checkList">
<el-checkbox label="basketball">篮球</el-checkbox>
<el-checkbox label="football">足球</el-checkbox>
<el-checkbox label="volleyball">排球</el-checkbox>
</el-checkbox-group>
checkList: ['basketball', 'football'],
. 按钮样式的多选框组
可以将每个选项改为按钮样式，外观更加美观。
按钮样式多选框组
<el-checkbox-button label="basketball">篮球</el-checkbox-button>
<el-checkbox-button label="football">足球</el-checkbox-button>
<el-checkbox-button label="volleyball">排球</el-checkbox-button>
6. 多选框组选中数量限制
可以给多选框组设置最小、最大选中数量限制，这样可以不必通过js代码控制选中数量，更加简单。
当然实际上还是使用js控制更加灵活，我个人还是倾向于使用js代码。
多选框组选中数量限制
<el-checkbox-group v-model="checkList2" :min="1" :max="2">
checkList2: ['basketball'],
7. 选项通过变量自动生成
在实际项目中使用时，往往多选框的选项是根据后端发过来的数据决定的，是动态的，实例如下：
动态生成选项，选中项{{courseSelected}}
<el-checkbox-group v-model="courseSelected">
<el-checkbox v-for="item in courseAll" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
1
2
3
4
courseAll: [{
id: 1,
name: "语文"
},
{
id: 2,
name: "数学"
}],
courseSelected: [],
8. 小结
建议使用多选框组，代码和逻辑更加清晰。