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>
<el-divider></el-divider>
效果如下:
4. 多选框组
如果选项过多,每个多选框对应一个变量非常不方便,可以使用多选框组,统一绑定一个变量。变量的值即为选中项的label值的集合。
HTML代码:
多选框组,选中项{{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>
<el-divider></el-divider>
JS代码:
checkList: ['basketball', 'football'],
效果如下:
. 按钮样式的多选框组
可以将每个选项改为按钮样式,外观更加美观。
按钮样式多选框组
<el-checkbox-group v-model="checkList">
<el-checkbox-button label="basketball">篮球</el-checkbox-button>
<el-checkbox-button label="football">足球</el-checkbox-button>
<el-checkbox-button label="volleyball">排球</el-checkbox-button>
</el-checkbox-group>
<el-divider></el-divider>
效果如下:
6. 多选框组选中数量限制
可以给多选框组设置最小、最大选中数量限制,这样可以不必通过js代码控制选中数量,更加简单。
当然实际上还是使用js控制更加灵活,我个人还是倾向于使用js代码。
HTML代码:
多选框组选中数量限制
<el-checkbox-group v-model="checkList2" :min="1" :max="2">
<el-checkbox label="basketball">篮球</el-checkbox>
<el-checkbox label="football">足球</el-checkbox>
<el-checkbox label="volleyball">排球</el-checkbox>
</el-checkbox-group>
JS代码:
checkList2: ['basketball'],
效果如下:
7. 选项通过变量自动生成
在实际项目中使用时,往往多选框的选项是根据后端发过来的数据决定的,是动态的,实例如下:
HTML代码:
动态生成选项,选中项{{courseSelected}}
<el-checkbox-group v-model="courseSelected">
<el-checkbox v-for="item in courseAll" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
</el-checkbox-group>
1
2
3
4
JS代码:
courseAll: [{
id: 1,
name: "语文"
},
{
id: 2,
name: "数学"
}],
courseSelected: [],
效果如下:
8. 小结
建议使用多选框组,代码和逻辑更加清晰。