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. 小結
建議使用多選框組，代碼和邏輯更加清晰。