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>
data () {
    return {
      selTitles: [{
          value: 'sex',
          lable: '性别'
        },{
          value: 'status',
          lable: '检查状态'
        },], // 已选择列
      allTitles: [
        {
          value: 'status',
          lable: '检查状态'
        },
        {
          value: 'name',
          lable: '姓名',
        },
        {
          value: 'sex',
          lable: '性别'
        },
        {
          value: 'age',
          lable: '年龄'
        }
      ], // 全部列
    };
  }


直接将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无法绑定对象数组的更多相关文章

  1. React实现checkbox group多组选项和标签组显示的联动

    实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...

  2. Eclipse优化集合,Eclipse优化速度,解决Ctrl+C、Ctrl+V卡

    Eclipse优化集合,Eclipse优化速度,解决Ctrl+C.Ctrl+V卡 >>>>>>>>>>>>>>> ...

  3. 【翻译】从Store生成Checkbox Group

    原文:Ext JS: Generating a Checkbox Group from a Store Ext JS的checkbox group可以用来将复选框组合成一个单一的逻辑字段.由于复选框时 ...

  4. 关于 ant Checkbox.Group 数组checked 设置失效问题

    最近在频繁使用ant UI框架.在使用到checkbox的时候,需要从后台获取数组显示,然后发现数组设置了checked:true,并不能使多选框处于选中状态,阅读 Checkbox Group 的属 ...

  5. 浅谈 Checkbox Group 的双向数据绑定

    前言 不曾想在忙碌的工作面前,写一篇技术博客也成了奢求. Checkbox 作为表单中最常见的一类元素,使用方式分为单值和多值,其中单值的绑定很简单,就是 true 和 false,但是多值(Chec ...

  6. 《ASP.NET MVC4 WEB编程》学习笔记------Model模型绑定

    本文转载自haiziguo Asp.net mvc中的模型绑定,或许大家经常用,但是具体说他是怎么一回事,可能还是会有些陌生,那么,本文就带你理解模型绑定.为了理解模型绑定,本文会先给出其定义,然后对 ...

  7. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  8. android data binding jetpack V 实现recyclerview 绑定

    android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...

  9. 最大子数组(I, II, III,IV,V)和最大子数组乘积 (动态规划)

    I 找一个连续最大子数组,sum加到nums[i], 如果前面子数组和<0则舍去,从头开始. class Solution { public: /** * @param nums: A list ...

随机推荐

  1. eclipse建立c语言工程以及成功下载到FPGA芯片过程遇到的各种问题以及解决方法详解

    推荐大家预先建立好一个工程目录文件夹,确实挺好用,参考正点原子的pdf教程,如下图所示, 我们eclipse在software文件夹建立一个workspace即可 选择用helloworld模板建立工 ...

  2. vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

  3. 手写 lodash/get、lodash/set 方法

    动机:平时写js代码时经常遇到要使用 lodash 中 _.get 和 _.set 的情况,每次使用都要引用 lodash,总感觉很烦,能不能自己实现一个简单的方法来实现一样的功能呢? get 方法实 ...

  4. jenkins AWS CodeDeploy不停机部署

    此项目的特点是把Jenkins与CodeDeploy相结合做的CICD做的蓝绿发布,CI与CD 是分开的,CI构建完以后以BuildNumber的形式把war包存至AWS的S3桶中.同时在java项目 ...

  5. 手写AVL平衡二叉搜索树

    手写AVL平衡二叉搜索树 二叉搜索树的局限性 先说一下什么是二叉搜索树,二叉树每个节点只有两个节点,二叉搜索树的每个左子节点的值小于其父节点的值,每个右子节点的值大于其左子节点的值.如下图: 二叉搜索 ...

  6. 发那科FANUC机器人视频学习教程

    82课时的全套发那科机器人视频教程,学完可以掌握发那科机械手的使用和编程,需要的加我微信私私聊.X241602 FANUC 是日本一家专门研究数控系统的公司,成立于1956年.是世界上最大的专业数控系 ...

  7. Mysql - You can't specify target table '表名' for update in FROM clause 错误解决办法

    背景 在MySQL中,写SQL语句的时候 ,可能会遇到 You can't specify target table '表名' for update in FROM clause 这样的错误 错误含义 ...

  8. ajax获取图片

    <img id="contents2_img" alt="" src="images/hope.png" style="wi ...

  9. CodeForce-702C Cellular Network(查找)

    Cellular Network CodeForces - 702C 给定 n (城市数量) 和 m (灯塔数量): 给定 a1~an 城市坐标: 给定 b1~bm 灯塔坐标: 求出灯塔照亮的最小半径 ...

  10. Android仿QQ空间发表动态

    效果展示图: 功能描述:用户点击+会进入发表动态的界面,发表成功后跳转到个人首页. 后续完善:增加个人头像的上传,对界面进行优化,增加点赞和评论的功能. 主要采用listview对内容进行展示,对sq ...