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
vue element plus Checkbox 多选框
vue element plus Checkbox 多选框
766 0
|
资源调度 JavaScript 前端开发
Day.js常用方法集合
Day.js常用方法集合
688 0
|
JavaScript 前端开发
input 输入 限制 大全
input 输入 限制 大全
540 0
|
关系型数据库 MySQL Windows
mysql彻底卸载干净的5个步骤,超多图超详细保姆级教程最新教程新手小白轻松上手
mysql彻底卸载干净的5个步骤,超多图超详细保姆级教程最新教程新手小白轻松上手
27070 2
|
数据可视化 API 异构计算
一分钟部署 Llama3 中文大模型,没别的,就是快
Meta开源了80亿和700亿参数的大模型,挑战百度创始人李彦宏的观点。这些模型在性能上逼近GPT-4和Claude3。此外,一个400B的超大模型即将发布。Huggingface上已有多个Llama3中文微调版本。无GPU用户可使用量化模型在CPU上运行,如8B模型用8bit量化,70B模型用4bit量化。最佳中文微调版是zhouzr/Llama3-8B-Chinese-Chat-GGUF,可在三分钟内通过Sealos公有云快速部署,搭配WebUI如Lobe Chat进行交互。
959 3
|
存储 数据管理 测试技术
构建Python构建自动化测试框架(原理与实践)
当谈到软件质量保证时,自动化测试是一个不可或缺的步骤。Python作为一种简单易学的编程语言,具有丰富的测试框架和库,使得构建自动化测试框架变得相对简单。本文将介绍如何使用Python构建自动化测试框架,包括选择合适的测试框架、编写测试用例、执行测试和生成报告等方面。
构建Python构建自动化测试框架(原理与实践)
|
开发框架 .NET API
.NET 体系概览图集 - 2024 最全总结
.NET Core 是一个免费、跨平台、开源的开发平台,用于一站式构建不同类型的应用程序。 .NET Core 是以 .NET Framework 为基础,但是经过重新设计、实现的的新一代框架,实现了原 .NET Framework 中的几乎所有功能,核心特点就是开源、跨平台。
1053 0
.NET 体系概览图集 - 2024 最全总结
|
存储 分布式计算 Hadoop
Hadoop中的数据冗余备份
【5月更文挑战第15天】Hadoop中的数据冗余备份
374 2