element ui的一个el-checkbox-group问题

最新推荐文章于 2024-07-02 12:14:14 发布
最新推荐文章于 2024-07-02 12:14:14 发布
阅读量6.8k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32235259/article/details/105275710
版权

今天在处理vue + element ui自动循环生成页面的问题时，被

<el-checkbox-group>

<el-checkbox></el-checkbox>

</el-checkbox-group>

的一个问题搞死了，具体现象就是：

通过v-for自动循环出的checkbox出现了点一个全选的情况，中间通过自己定义一个零时的空[]却可以无错通过，但是本着追根溯源的心态还是排查了一次，找到了对应点：

在每次重置dialog的form对象时，如果你把checkbox的v-model属性中的值在重置时，把它置为非空[]的数组，那么就会出现上述问题，所以需要处理重置方法：

王志鹏的博客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI VUE后台管理系统 商品管理 商品列表 商品参数 解决el-checkbox-group复选框点击消失的问题
weixin_48383757的博客
11-19 1368
ElementUI VUE后台管理系统 商品管理 商品列表 商品参数 解决el-checkbox-group复选框点击消失的问题 1、在使用el-checkbox-group渲染出来的复选框 在点击之后，会消失，用户体验感差 我们在写代码的时候应该做出优化 <!-- 使用数组渲染复选框组 在template中写下如下代码--> <el-checkbox-group v-model="item.attr_checked_vals"> <el-check
循环多组checkbox-group
weixin_43153138的博客
03-28 4174
使用场景 因项目需求，采用动态数据展示每组多选，所以循环多组checkbox-group进行实现！ 1.页面代码 <el-form-item v-for="(item, topIndex) in cities" :key="topIndex" class="checkBox-item"> <el-checkbox class="textCheck" :disabled="dialo
CheckboxGroup的reset()方法
l致力于软件开发
04-23 1814
<br /><br />在项目中使用到了Ext.form.CheckboxGroup,在清空事件中调用它的reset()方法，发现只能把状态置为初次加载时的状态，而不是清空所有选项。查看了EXT帮助手册，里面的解释是：“重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages ”。所以只能自己手动清除所有选项，代码如下：Js
若依安装教程（保姆级教程）
最新发布
qq_73627657的博客
07-02 1980
若依（RuoYi）是一款基于 Spring Boot 和 Vue.js 的开源项目，旨在为开发人员提供一个快速、高效的企业级应用开发平台。若依框架集成了多种常用的功能模块，便于开发人员进行定制化开发。以下是若依的主要特点和功能简介。
【无标题】vue3 element table复选框被选中消失
weixin_43945122的博客
08-04 503
【代码】【无标题】vue3 element table复选框被选中消失。
Element多选框组el-checkbox-group，重新勾选时数组顺序被打乱?
林深时见鹿
03-18 622
最近使用element的el-checkbox-group组件，发现多选点击之后，最后得到的数据是乱的。顺序点击没问题，如果不按顺序点击，后台得到的数据是乱序的。比如我的表单是这样的，我可能会选择三个中的某一个，又或者先点第三个再点第三个，这样后台得到的数据顺序是“证件报告,设备报告”，但是其实我想要的是“设备报告,证件报告”。因为对我的数组是没法排序的汉字之类的，就只能用checkbox的数组进行filter，挨个去过滤是否在已选的数组中；此次，就验证了我们前面说到的问题，解决了排序的问题；
element-el-checkbox相关问题。
m0_49123579的博客
08-19 3458
（1.）复选框回显问题，分单个和数组。 （2.）全选问题，第一次点击不生效。 （3.）以及取消被选中的框时，不生效， （4.）以及添加change 问题时
element el-checkbox-group 的用法
热门推荐
weixin_45753961的博客
07-07 1万+
el-checkbox的lable的用法很关键。 lable对应的是v-model绑定的数组里的对象。 例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。 data定义: sendTypeList: [{ value: 1, label: "手机短信" }, { value: 2, label: "邮箱" }, ],
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若...
element ui 多个el-checkbox多选框用法
qq_38502227的博客
11-13 6126
效果图： <div class="permissions-information-content" v-for="(data, index) in newJurisdictionData" :key="data.id" > <el-checkbox :label="data.code" @change="checkAllChildren($event, data, ind
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
在Element UI中，`el-checkbox-group`组件和它的子组件`el-checkbox`是通过`v-model`与数据进行双向绑定的。默认情况下，如果绑定的数据不存在，Vue会将其初始化为一个布尔类型（`true`或`false`）。这就解释了为...
el如何获取复选框的值_element-ui 的el-checkbox-group 到底该如何绑定v-model数据？
weixin_39976499的博客
03-04 2249
现在有一个问卷调查页面的需求，选择了element-ui的el-checkbox-group来处理多选题，在有多个多选题的情况下，如何绑定v-model数据才能获取到 问题id=>对应问题下选中的选项question.vue页面*{{item.title}}(多选)v-model="temp[item.id]" @change="OnCheckBoxChange(item.id)"&...
el-checkbox-group报错length的问题
weixin_69675092的博客
08-11 468
之前错误的写法是把v-model=“form.gradeData”,就导致一直有问题，改了之后就好了。
解决elment 动态多选框组（el-checkbox-group）无法设置默认值问题
mhx123456789的博客
06-09 709
解决elment 动态多选框组（el-checkbox-group）无法设置默认值问题
Element Checkbox 多选框 change事件
weixin_49295900的博客
11-25 4821
change 事件想传默认值又想传自定义参数 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checked=>handleCheckAllChange(checked, val, i)" >{{key}}</el-checkbox>
element uiform重置checkbox的值_Vuerouter+Element
weixin_35056641的博客
01-19 685
1.新建工程vue init webpack myvue022.安装组件npminstallnpm install vue-loader -save-devnpm install element-ui -savenpminstallsass-loader node-sass -save-dev3.启动测试npm run dev4.用IDEA接管5.去Element-ui官网复制相关...
elcheckbox 点击自动全选问题解决
想到哪记到哪
06-07 3888
使用 el-check-group组件时，出现异常表现情况，点击一个其他全部一起被选中 出现这个原因的原理会有两种情况 一：子项el-check拥有了相同的选中属性，造成同时选中 注意一下属性设置即可 二：el-check-group的数据绑定类型必须是数组 如果是从数据区读取出来的拼接字符串，是需要进行一个拆解操作的，讲字符串拆分为数组，例如 获取到：“1,2,3,4” 转换为：[1,2,3,4] OR [“1”,“2”,“3”,“4”] 同样存储是需要相同的规则来拼接 直接把非集合的类型，如字符串绑定
单选框-复选框重置的方法
rqgxy的博客
11-29 6657
问题描述         希望对于填报表中的编辑风格为单选钮或复选框的单元格能够进行重置。如男、女单选框，在报表初始化展现时是两个单选钮都不点选，当选择一项后，无法将其重新改成都不点选的状态，需要能对单选钮的单元格进行重置。          解决方案 function clearForm(formName) {    var formObj = document.forms[form
vue+element ui 表单校验el-checkbox
03-25
怎么实现只选中一个的校验？ A: 可以通过自定义校验规则来实现只选中一个的校验。具体实现方式如下： 1. 在 el-checkbox-group 中添加 rules 属性，值为自定义的校验规则函数。 ``` <el-checkbox-group v-model="checkedList" :rules="checkOneRule"> <el-checkbox label="选项一"></el-checkbox> <el-checkbox label="选项二"></el-checkbox> <el-checkbox label="选项三"></el-checkbox> </el-checkbox-group> ``` 2. 编写 checkOneRule 自定义规则函数，使用 Array.prototype.filter 方法筛选出选中的复选框，然后根据选中数量判断是否合法。 ``` checkOneRule(rule, value, callback) { if (value && value.length === 1) { callback(); } else { callback(new Error('请选择一个选项')); } } ``` 3. 在 data 中定义 checkedList 数组来存储选中的值。 ``` data() { return { checkedList: [] } } ``` 这样就能实现只选中一个的校验了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值