Element el-check 多选框详解

水深无声 2022-10-25 01:00 442阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 用途
 *  2. 普通多选框
 *  3. 带边框的多选框
 *  4. 多选框组
 *  5. 按钮样式的多选框组
 *  6. 多选框组选中数量限制
 *  7. 选项通过变量自动生成
 *  8. 小结

# 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,

效果如下：  
![在这里插入图片描述][20210130133657483.png_pic_center]

# 3. 带边框的多选框 #

带边框的多选框样式更加富有科技感，但是用法是一样的。HTML代码部分添加border属性即可：

带边框的多选框:
        <el-checkbox v-model="checkedBasketball" border>篮球</el-checkbox>
        <el-checkbox v-model="checkedFootball" border>足球</el-checkbox>
        <el-divider></el-divider>

效果如下：  
![在这里插入图片描述][20210130133759301.png_pic_center]

# 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'],

效果如下：  
![在这里插入图片描述][20210130133928576.png_pic_center]

# 5. 按钮样式的多选框组 #

可以将每个选项改为按钮样式，外观更加美观。

按钮样式多选框组
        <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>

效果如下：  
![在这里插入图片描述][20210130134056220.png_pic_center]

# 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'],

效果如下：  
![在这里插入图片描述][20210130134252844.png_pic_center]

# 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>

JS代码：

courseAll: [{
        
            id: 1,
            name: "语文"
          },
          {
        
            id: 2,
            name: "数学"
          }],
          courseSelected: [],

效果如下：  
![在这里插入图片描述][2021013013552664.png_pic_center]

# 8. 小结 #

建议使用多选框组，代码和逻辑更加清晰。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210130133657483.png_pic_center]: /images/20221024/44b5a92eca394f1fa16fa661bc6f38c5.png
[20210130133759301.png_pic_center]: /images/20221024/ca0297c37baa4e88b7d4e4d067d43f30.png
[20210130133928576.png_pic_center]: /images/20221024/c39c7f514b4840d088fe948f42dc1549.png
[20210130134056220.png_pic_center]: /images/20221024/33234d79e33140d2b964820f1322c232.png
[20210130134252844.png_pic_center]: /images/20221024/ad6c3b25bd814e62964f4d35dfdcfd28.png
[2021013013552664.png_pic_center]: /images/20221024/92cdcf04afc0406ea05fa6cd71b90b69.png