记录一次element ui 中 el-checkbox-group 点击一个全部选中的问题

最新推荐文章于 2024-05-21 21:57:08 发布
最新推荐文章于 2024-05-21 21:57:08 发布
阅读量2k 收藏
点赞数 3
分类专栏： 开发中遇到的一些坑 #后端码农写前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30475355/article/details/116001642
版权

使用的element 版本是2.2.2，根据官方文档在el-checkbox-group中v-model绑定数组对象即可。但是在实际操作中，我定义了数组对象checkedRoles,随意选中一个，但是全部选中了，且打印到checkedRoles的值为true

 

 

后来把数组定义到form对象中就可以了。同时绑定对象中的数组v-model="form.checkedRoles"

问题解决了，但是找不到原因，请求大佬解答！！！

想带你去看蓝天白云
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
element-ui之多选框的使用
Akatsuki233的博客
11-06 1353
多选框 <el-checkbox-group v-model="items"> <el-checkbox v-for="(item, index) in allItems" :key="index" :label="item.id">{{item.label}}</el-checkbox> </el-checkbox-group> &l...
element el-checkbox-group 的用法
web18224617243的博客
02-25 3474
el-checkbox的lable的用法很关键。 lable对应的是v-model绑定的数组里的对象。 例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。 data定义: sendTypeList: [{ value: 1, label: "手机短信" }, { value: 2, label: "邮箱" }, ],
【Vue】el-checkbox多选框实现单选效果，选中一个选项则自动取消其他勾选
最新发布
coderYYY的博客
05-21 1025
多选框的样式，单选框的效果
el-checkbox点击一个其他的全部都选中了
热门推荐
LLL_liuhui的博客
05-06 1万+
今天用elementui的el-checkbox-group遇到一个问题，点击其中一个，所有的checkbox都选中了 我原来是这么写的，可是不行 <el-form-item label="机构"> <el-checkbox-group v-model="ruleForm.organizationIds" ...
android 中RadioGroup的默认选项和点击选项同时被选中的解决方法
chunjunlu的专栏
06-27 2077
问题描述:动态给RadioGroup添加radiobutton并设置了一个radiobutton处于选中状态,然后点击其他radiobutton,尴尬出现了,出现了两个radiobutton同时被选中. 解决方法:动态添加radiobutton的时候设置radiobutton的值就可以了.
关于element el-checkbox组件click事件的一些想法
lsf1192354203的博客
02-15 4637
el-checkbox事件及处理函数
多选框选择一个el-check，但所有的el-check都被选了
陈皮球的博客
08-13 814
遇到的问题：el-checkbox-group 绑定的值只有true/false （或者：选择一个el-check，所有的el-check都被选了） 解决：假设el-checkbox-group绑定的值的list，list在data中应该定义为数组[] （即：list: []）。原因是el-check是多选框 ...
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若...
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
Element UI是一个常用的前端组件库，它的`el-checkbox`组件用于创建复选框。然而，当我们尝试使用v-model动态绑定数据时，可能会遇到一些问题。本文将探讨在Vue中动态生成`el-checkbox`并解决点击无法正确赋值的难题...
vue基于element-ui的三级CheckBox复选框功能的实现代码
12-29
但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。 效果图预览： 首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能 ...
elementUi中checkbox的属性indeterminate 状态和v-model的关系
01-08
在Element UI这个流行的Vue.js组件库中，Checkbox组件是一个常用的选择项，用于处理多选功能。其中，`indeterminate`属性和`v-model`之间的关系是实现复选框三态逻辑的关键，即全选、部分选和未选。在本文中，我们将...
el-checkbox-group 点击box 没反应，无法取消勾选（记一次debug的思路）
Curry_On的博客
06-06 5463
今天工作时，碰到了项目代码中一个bug，表现出来的效果是：el-checkbox-group 点击 box 没反应，无法取消勾选。 也就是 box 默认是被勾选上的，但是点击取消勾选却没反应。 问题看起来还是比较奇怪，当然，最后bug还是被找出来了，这篇文章就来记录和分享一下我找问题的思路...
elcheckbox 点击自动全选问题解决
想到哪记到哪
06-07 3828
使用 el-check-group组件时，出现异常表现情况，点击一个其他全部一起被选中 出现这个原因的原理会有两种情况 一：子项el-check拥有了相同的选中属性，造成同时选中 注意一下属性设置即可 二：el-check-group的数据绑定类型必须是数组 如果是从数据区读取出来的拼接字符串，是需要进行一个拆解操作的，讲字符串拆分为数组，例如 获取到：“1,2,3,4” 转换为：[1,2,3,4] OR [“1”,“2”,“3”,“4”] 同样存储是需要相同的规则来拼接 直接把非集合的类型，如字符串绑定
ElementUI VUE后台管理系统 商品管理 商品列表 商品参数 解决el-checkbox-group复选框点击消失的问题
weixin_48383757的博客
11-19 1334
ElementUI VUE后台管理系统 商品管理 商品列表 商品参数 解决el-checkbox-group复选框点击消失的问题 1、在使用el-checkbox-group渲染出来的复选框 在点击之后，会消失，用户体验感差 我们在写代码的时候应该做出优化 <!-- 使用数组渲染复选框组 在template中写下如下代码--> <el-checkbox-group v-model="item.attr_checked_vals"> <el-check
关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题
ColinTChen的博客
10-28 6334
关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题1.把 element 源码克隆到本地2.安装依赖3.查找文件4.替换代码5.重新打包 1.把 element 源码克隆到本地 git clone https://github.com/ElemeFE/element.git 或者下 zip 包 https://github.com/ElemeFE/element 2.安装依赖 npm install 或 cnpm install 3.查找文件 文件目录：packages\
Checkbox 多选框 数据为对象
qq_39211165的博客
05-25 1482
Checkbox 多选框 数据为对象 Checkbox 多选框显示和绑定的值默认是一样的，源数据一般是一维数组 今天使用 Checkbox 多选框 的时候需要绑定 ID, 显示的为国际化文字，使用的源数据是对象类型 使用插槽即可, api 并为提及，后来发现在例子中有体现，特地记录一下。 const cityOptions = [ {id: 1, name: '上海'}， {id: 2, name: '北京'}， {id: 3, name: '深圳'}， {id: 4, name: '广州'}
vue + element checkbox-group 点击一个所有全部选中了
qq_51703717的博客
01-09 3569
针对于“vue + element checkbox-group 点击一个所有全部选中”的问题，网上有两种解决方法 第一种： 原因：checkbox-group元素能把多个 checkbox 管理为一组，注意在group中使用v-model绑定Array类型的变量 第二种： 原因：没有绑定label的值，el-checkbox的label属性是该checkbox对应的值，若该标签中无内容，则该属性也充当checkbox按钮后的介绍内容
el-checkbox-group多选
Humor_L的博客
11-01 461
el-checkbox-的某些需求应用。
element ui el-checkbox-group 添加校验并且解决 点一个 全部选中
06-09
要解决“点一个 全部选中”的问题，可以通过在子组件的change事件处理函数中，判断当前checkbox是否是已选中的最后一个，如果是则将所有的checkbox都选中。以下是一个示例代码： ```html <el-checkbox v-model=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值