Element el-check 多选框详解

简介: 本文目录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,


效果如下:

image.png

3. 带边框的多选框

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


带边框的多选框:

   <el-checkbox v-model="checkedBasketball" border>篮球</el-checkbox>

   <el-checkbox v-model="checkedFootball" border>足球</el-checkbox>

   <el-divider></el-divider>


效果如下:

image.png

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


效果如下:

image.png. 按钮样式的多选框组

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


  按钮样式多选框组

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


效果如下:

image.png

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


效果如下:

image.png

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: [],


效果如下:

image.png

8. 小结

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

相关文章
|
JavaScript
Element el-radio 单选框详解
本文目录 1. 用途 2. 单选框 3. 单选框样式 4. 单选框组 4. 单选框组样式 5. 尺寸调节 6. 绑定值变化事件 7. 小结
1632 0
Element el-radio 单选框详解
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2927 0
Element el-button 按钮组件详解
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6167 0
Element el-select 选择器(下拉框)详解
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6041 0
Element el-row el-col 布局组件详解
|
5月前
|
前端开发
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
386 0
【已解决】Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
506 0
【已解决】Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
|
7月前
|
前端开发
|
前端开发
el-option样式改变以及多个el-option无法并列问题详解(element-plus+Vue3)
el-option样式改变以及多个el-option无法并列问题详解(element-plus+Vue3)
423 0