场景

最终实现的效果

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。

el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。

label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

官方示例代码

<template><el-checkbox-group v-model="checkList"><el-checkbox label="复选框 A"></el-checkbox><el-checkbox label="复选框 B"></el-checkbox><el-checkbox label="复选框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="选中且禁用" disabled></el-checkbox></el-checkbox-group>
</template><script>export default {data () {return {checkList: ['选中且禁用','复选框 A']};}};</script>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

添加一个el-check-group

            <el-checkbox-group v-model="form.checkList" @change="handleCheckedDatesChange"><el-checkbox v-for="date in dates" :label="date.key" :key="date.key">{{date.label}}</el-checkbox></el-checkbox-group>

怎样设置其选项有哪些

通过v-if循环一个对象数组dates,label绑定的是这个选项的值，即实际传递的值，实际显示的值通过{{date.label}}来显示。

对这个对象数组进行赋值

  data() {return {dates: dateOptions,

这里将其设置为固定值，可以设置为请求后台数据并将对象的list赋值给dates,这里是将一个对象数组常量赋值给dates

const dateOptions = [{key: "d1",label: "1号",},{key: "d2",label: "2号",},{key: "d3",label: "3号",},{key: "d4",label: "4号",},{key: "d5",label: "5号",},{key: "d6",label: "6号",},{key: "d7",label: "7号",},{key: "d8",label: "8号",},{key: "d9",label: "9号",},{key: "d10",label: "10号",},{key: "d11",label: "11号",},{key: "d12",label: "12号",},{key: "d13",label: "13号",},{key: "d13",label: "13号",},{key: "d14",label: "14号",},{key: "d15",label: "15号",},{key: "d16",label: "16号",},{key: "d17",label: "17号",},{key: "d18",label: "18号",},{key: "d19",label: "19号",},{key: "d20",label: "20号",},{key: "d21",label: "21号",},{key: "d22",label: "22号",},{key: "d23",label: "23号",},{key: "d24",label: "24号",},{key: "d25",label: "25号",},{key: "d26",label: "26号",},{key: "d27",label: "27号",},{key: "d28",label: "28号",},{key: "d29",label: "29号",},{key: "d30",label: "30号",},{key: "d31",label: "31号",},
];

然后怎样获取勾选中的值，通过

v-model="form.checkList"

来实现，将选中的label所形成的数组与form表单参数对象的checkList所绑定。

checkList是一个数组。

      form: {id: undefined,gh: undefined,xm: undefined,dabh: undefined,bm: undefined,year: undefined,mouth: undefined,checkList: [],kqzt: undefined,},

这样在将此form提交到后台时就能获取到所选的label组成的数组。

ElementUIz中el-checkbox-group多选框组的使用，怎样设置一组选项与获取所选值相关推荐

ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
antd官方文档中Checkbox Group给出的api如下: 据图可知,其中Group 的 api 只有一个disabled,它的作用是使整个group选项全部失效,达不到我们的效果,但是Chec ...
elementui复选框组使用与遇到的问题
elementui复选框组使用与遇到的问题 1.复选框组使用 2.默认值的设置 3.遇到的问题 3.1.导致问题的写法 3.2.正常可以使用的写法 4.事件冒泡的问题今天有个弹出窗编辑的时候elem ...
java 复选框怎么用_Java Swing公开课|Java Swing的复选框组件怎么用，看完这篇文章你一定就会了...
[摘要]作为一门面向对象编程语言,Java吸收了C++语言的优点,也展现了其强大的一面,我们能在各个地方看到其功能强大和简单易用的两个特征,当然,也吸引了很多程序员的注意力,所以就有人想了解Java的 ...
jquery复选框组清空选中的值_jQuery选取所有复选框被选中的值并用Ajax异步提交数据...
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
HTML复选框和提交按钮组合设置
<!-- 在这个html文档中我们要编写创建一个复选框的效果,并且含有一个按钮,当我们点击按钮后面的复选项目的时候,会记录这个我们的选项并且在点击summit之后我们的结果会提交到服务器 ...
jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
这篇文章主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuer ...
jquery复选框组清空选中的值_防火墙基本配置：配置策略组
配置策略组用户可以将一些策略规则组织到一起组成策略组.用户可以直接对策略组进行配置,以简化管理. 配置策略组,包括新建策略组.删除策略组.启用/禁用策略组.添加/删除策略规则成员.编辑策略组和显示禁 ...

ElementUIz中el-checkbox-group多选框组的使用，怎样设置一组选项与获取所选值

场景

实现

ElementUIz中el-checkbox-group多选框组的使用，怎样设置一组选项与获取所选值相关推荐

最新文章

热门文章