点此查看全部文字教程、视频教程、源代码

本文目录

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,

效果如下：

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

效果如下：

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>

效果如下：

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>

JS代码：

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

效果如下：

8. 小结

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

Element el-check 多选框详解相关推荐

Element el-select 选择器(下拉框)详解
点此查看全部文字教程.视频教程.源代码本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 ...
Android 应用开发（40）---TextView(文本框)详解
TextView(文本框)详解 1.基础属性详解: 通过下面这个简单的界面,我们来了解几个最基本的属性: 布局代码: <RelativeLayout xmlns:android="ht ...
Android基础入门教程——2.3.1 TextView(文本框)详解
Android基础入门教程--2.3.1 TextView(文本框)详解标签(空格分隔): Android基础入门教程本节引言: 学习完Android中的六大布局,从本节开始我们来一个个讲解And ...
Android详解之TextView(文本框)详解
TextView(文本框)详解 textStyle:设置字体风格,三个可选值:**normal**(无效果),**bold**(加粗),**italic**(斜体) 带阴影的TextView 涉及到的 ...
android开发TextView(文本框)详解
android开发TextView(文本框)详解作用 TextView(文本框),用于显示文本的一个控件属性详解以该代码段为例 <TextViewandroid:id="@+id ...
Java Web中的EL（表达式语言）详解
Java Web中的EL(表达式语言)详解表达式语言(Expression Language)简称EL,它是JSP2.0中引入的一个新内容.通过EL可以简化在JSP开发中对对象的引用,从而规范页面 ...
Element el-transfer 穿梭框详解
点此查看全部文字教程.视频教程.源代码本文目录 1. 前言 2. 基本用法 3. 可搜索 4. 自定义标题和按钮的文本 5. 设置数据项别名 6. 小结 1. 前言穿梭框就是左右各有一个复选框列表 ...
Element表格嵌入复选框以及单选框
1,element 表格嵌入CheckBox 效果图如下: 2,element结合checkBox实现单选效果如下: html代码: <template><div><p ...
android:text=@string/ ,Android之TextView(文本框)详解
1.基础属性详解: 通过下面这个简单的界面,我们来了解几个最基本的属性: 布局代码: xmlns:tools="http://schemas.android.com/tools" ...

Element el-check 多选框详解

本文目录

1. 用途

2. 普通多选框

3. 带边框的多选框

4. 多选框组

5. 按钮样式的多选框组

6. 多选框组选中数量限制

7. 选项通过变量自动生成

8. 小结

Element el-check 多选框详解相关推荐

最新文章

热门文章