解决el-checkbox-group 的v-model无法绑定对象数组
elementUI官方文档中el-checkbox-group组件绑定的都为一维数组,真实业务中数据绑定往往是多个键值对的对象数组,本文主要解决这个问题。
如下代码:
<el-checkbox-group class="title-list" v-model="selTitles" @change='selchange'
>
<el-checkbox class="titles" v-for='(allItem, allItemIndex) in allTitles' :label="allItem" :key="allItem.value">{{allItem.lable}}</el-checkbox> </el-checkbox-group>
直接将el-checkbox的lable属性绑定为数组的每一项元素,在chang事件selchange中就能获取到被选中项目的全信息,包括value、label,此时会发现设置初始选中选项会设置不上,并且初始设入selTitles中的选项,页面显示并未选中,但勾选时第一次勾选不上,第二次才能勾选上,由此现象认为可能是elementui的bug,或者说人组件库压根就不支持el-checkbox-group组件绑定的对象数组,但每次选择项目改变还需要转换下数据实在是脑壳疼,所有就想着直接改组件库底层代码岂不快哉!
初始设入selTitles中的选项,勾选时第一次勾选不上,第二次才能勾选上,猜想可能数据已经设入被选项了,只是页面未显示选中,审查元素发现有个is-checked控制页面显示选中,于是捋到了源码中的如下代码:

更改步骤
1、从github上获取elementUI源码,安装依赖,
2、将上图两个组件(packages\checkbox\src\目录中)中画红框代码换为如下代码即可
return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1;
3、运行命令:npm run dist,将生成的lib包替换项目node-module的elementui 文件夹中的lib
ok,接下来就可以随心所欲了!
解决el-checkbox-group 的v-model无法绑定对象数组的更多相关文章
- React实现checkbox group多组选项和标签组显示的联动
实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...
- Eclipse优化集合,Eclipse优化速度,解决Ctrl+C、Ctrl+V卡
Eclipse优化集合,Eclipse优化速度,解决Ctrl+C.Ctrl+V卡 >>>>>>>>>>>>>>> ...
- 【翻译】从Store生成Checkbox Group
原文:Ext JS: Generating a Checkbox Group from a Store Ext JS的checkbox group可以用来将复选框组合成一个单一的逻辑字段.由于复选框时 ...
- 关于 ant Checkbox.Group 数组checked 设置失效问题
最近在频繁使用ant UI框架.在使用到checkbox的时候,需要从后台获取数组显示,然后发现数组设置了checked:true,并不能使多选框处于选中状态,阅读 Checkbox Group 的属 ...
- 浅谈 Checkbox Group 的双向数据绑定
前言 不曾想在忙碌的工作面前,写一篇技术博客也成了奢求. Checkbox 作为表单中最常见的一类元素,使用方式分为单值和多值,其中单值的绑定很简单,就是 true 和 false,但是多值(Chec ...
- 《ASP.NET MVC4 WEB编程》学习笔记------Model模型绑定
本文转载自haiziguo Asp.net mvc中的模型绑定,或许大家经常用,但是具体说他是怎么一回事,可能还是会有些陌生,那么,本文就带你理解模型绑定.为了理解模型绑定,本文会先给出其定义,然后对 ...
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- android data binding jetpack V 实现recyclerview 绑定
android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...
- 最大子数组(I, II, III,IV,V)和最大子数组乘积 (动态规划)
I 找一个连续最大子数组,sum加到nums[i], 如果前面子数组和<0则舍去,从头开始. class Solution { public: /** * @param nums: A list ...
随机推荐
- PyQT5:信号和槽
PyQT5:信号和槽 信号和槽 Qt的主要特征之一是它使用信号和插槽在对象之间进行通信. 当潜在的事件发生时,会发出一个信号.插槽是可调用的Python,如果将信号连接到插槽,则在发出信号时将调用该插 ...
- JDK1.8源码阅读笔记(1)Object类
JDK1.8源码阅读笔记(1)Object类 Object 类属于 java.lang 包,此包下的所有类在使⽤时⽆需⼿动导⼊,系统会在程序编译期间⾃动 导⼊.Object 类是所有类的基类,当⼀ ...
- python使用UTF-8写入CSV中文乱码
使用encoding='utf-8',写入的文档是乱码. 解决办法: 修改encoding='utf-8-sig' 关于文件open()函数: open(path,'-模式-',encoding='u ...
- Python - 基本数据处理函数round()、int()、floor()、ceil()
前言 对每位程序员来说,在编程过程中数据处理是不可避免的,很多时候都需要根据需求把获取到的数据进行处理,取整则是最基本的数据处理.取整的方式则包括向下取整.四舍五入.向上取整等等.下面就来看看在Pyt ...
- AI学习1
什么是AI: 功能介绍:是一种应用于出版.多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的矢量图形处理工具应用:标志设计.字体设计.印刷出版.海报书籍排版.专业插画.多媒体图像处理和互联网页面 ...
- AI异构通信:重压下的突围,华为P50系列的卓越体验
撰文 |懂懂 编辑 | 秦言 来源:懂懂笔记 "华为不会让消费者失望."华为消费者业务CEO余承东在P50系列发布会上如是说. 今年4月美国对华为第四轮制裁以来,华为终端产品无缘5 ...
- python库--flashtext--大规模数据清洗利器
flashtext.keyword (flashtext) 类/方法 返回值 参数 说明 .KeywordProcessor() 对象kp case_sensitive=False 是否区分大小写 添 ...
- ESP8266- AP模式的使用
打算通过该模式,利用手机APP完成配网 • AP,也就是无线接入点,是一个无线网络的创建者,是网络的中心节点.一般家庭或办公室使用的无线路由器就是一个AP. • STA站点,每一个连接到无线网络中的终 ...
- Docker系列(18)- 具名挂载和匿名挂载
容器数据卷挂载方式 容器的数据卷可以看成就是容器的挂载方式:一个宿主机有多个容器,多个容器挂载方式不同,因此宿主机就有多个卷 每一个挂载方式在宿主机上都有一个名称,即卷名 宿主机如何查看这些卷,对使用 ...
- Shell系列(33) - 多分支if语句简介及计算器例子
多分支if条件语句 if [ 条件判断式1 ] then 当条件判断式1成立时,执行程序1 elif [ 条件判断式2 ] then 当条件判断式2成立时,执行程序2 ...省略更多条件... els ...