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 多选框
1070 0
|
JavaScript 前端开发
input 输入 限制 大全
input 输入 限制 大全
732 0
|
Python
python 获取剪切板的内容
python 获取剪切板的内容
419 0
|
人工智能 自然语言处理 搜索推荐
6个好用的AI写作工具合集,各种AI写作软件类型超全整理!
AI生成营销文案、生成文章标题、改写润色内容、写作素材搜集...好用的AI写作工具有哪些?
6个好用的AI写作工具合集,各种AI写作软件类型超全整理!
Element el-color-picker 颜色选择器详解
本文目录 1. 前言 2. 基本用法 3. 带默认值 4. 调整尺寸 5. 小结
3537 0
Element el-color-picker 颜色选择器详解
|
4月前
|
JavaScript 前端开发 API
前端组件库——Element Plus知识点大全(一)
教程来源 https://tmywi.cn/category/lvxing.html Element Plus是饿了么团队打造的Vue 3官方UI库,深度集成TypeScript与Composition API,提供70+企业级组件、完善设计规范及主题定制能力。GitHub星标超2.5万,国内Vue 3中后台开发首选方案。
|
Ubuntu 应用服务中间件 网络安全
Nginx伪流媒体服务器搭建详细说明以及案例
Nginx伪流媒体服务器搭建步骤如下:1. 安装Nginx,根据系统选择命令;2. 编辑配置文件(/etc/nginx/nginx.conf),添加mp4相关设置;3. 创建视频目录/usr/share/nginx/html/videos并上传视频;4. 重启Nginx应用更改;5. 通过浏览器访问视频,如http://your_server_ip/videos/example.mp4。注意启用mp4模块,确保视频格式支持伪流媒体播放。
814 159
|
资源调度 JavaScript
Vue2拖拽插件(vuedraggable)
这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能,并提供了插件的安装、配置和事件处理的示例。
1947 1
Vue2拖拽插件(vuedraggable)
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
本文介绍了在Vue3 + ElementPlus项目中如何使用`el-autocomplete`控件实现自动补全输入功能,并探讨了不同版本ElementPlus中`clearable`属性的兼容性问题。
1863 0
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
|
存储 分布式计算 Hadoop
Hadoop中的数据冗余备份
【5月更文挑战第15天】Hadoop中的数据冗余备份
540 2

热门文章

最新文章