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. adb shell 查看当前与用户交互的 activity

    adb shell dumpsys activity activities | grep mActivityComponent

  2. Lambda@edge 实现负载均衡器功能

    一般的业务实现流程为CDN->ELB->EC2,但OTT业务往往会产生很高的流量费用,如果使用常规的架构,流量费用会成倍增加,为了降低费用,我们对架构做了一些优化. AWS Cloudfr ...

  3. Redis详解(一)——

    Redis详解1 https://www.cnblogs.com/MoYu-zc/p/14985250.html https://www.cnblogs.com/xiaoxiaotank/p/1498 ...

  4. 这篇 Java 基础,我吹不动了

    Hey guys,这里是程序员cxuan,欢迎你收看我最新一期的文章,这篇文章我补充了一些关于<Java基础核心总结>的内容,修改了部分错别字和语句不通顺的地方,并且对内部类.泛型等内容进 ...

  5. GIT:创建、查看分支命令(git branch -vv)

    在开发过程中一般会用到Git进行版本管理,创建查看分支并与远程仓库交互是非常常见的操作. branch分支 是指在开发主线中分离出来的,做进一步开发而不影响到原来的主线. Git存储的不是一系列的更改 ...

  6. Vue3.x全家桶+vite+TS-构建Vue3基本框架

    目录 一.搭建基础项目 1.vite创建项目 3.运行项目 2.环境变量设置介绍 vite配置多环境打包 二.配置Router 1.安装路由 2.配置路由 3.引入 三.配置Vuex 1.安装vuex ...

  7. Linux没有/var/log/messages日志文件

    1.新安装的CentOS8没有/var/log/messages日志文件: 安装rsyslog: dnf  install   -y  rsyslog 或 yum  install  -y  rsys ...

  8. Django学习day09随堂笔记

    每日测验 """ 今日考题: 1.choices参数的应用场景有哪些,如何获取该字段的值 2.django是什么模型的框架,简述MTV与MVC模型 3.多对多表关系有几种 ...

  9. 【PHP数据结构】PHP数据结构及算法总结

    断断续续地把这个系列写完了,就像上一个设计模式一样,算法这个系列也是前前后后写了将近有一年的时间.当然,都是在业余或者晚上的时间写完的,所以进度如此地慢.更主要的是,既然要写,总得要自己先弄懂吧,对于 ...

  10. git 报错 gitThere is no tracking information for the current branch. Please specify which branch you w

    新建本地分支后将本地分支推送到远程库, 使用git pull 或者 git push 的时候报错gitThere is no tracking information for the current ...