关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题

关于解决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/element2.安

文章共1,016字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

colintaochen

6244人浏览 · 2020-10-28 16:28:32

colintaochen · 2020-10-28 16:28:32 发布

关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题

1.问题背景
2.解决方案

1.问题背景

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['复选框 A']
      };
    }
  };
</script>

element UI 官方文档中，el-checkbox-group组件绑定值都是一维字符串数组（如上图所示），但在实际项目开发中，往往需要绑定一维对象数组来满足项目需求。以下图为例，在某绩效项目中，对模板配置动态绩效指标时，绩效指标的绑定值需要绑定一维对象数组，官方el-checkbox-group已不能满足项目需求。
在这里插入图片描述

2.解决方案

1.把 element 源码克隆到本地

git clone https://github.com/ElemeFE/element.git
或者下 zip 包 https://github.com/ElemeFE/element

2.安装依赖

npm install 或 cnpm install

3.查找文件

文件目录：packages\checkbox\src下的 checkbox-button.vue 和 checkbox.vue 文件
在这里插入图片描述

4.替换代码

将上图红框中的代码替换为以下代码：

return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1;

5.重新打包

npm run dist，将生成的 lib 文件夹替换项目里 node-module 的 element-ui 文件夹中的 lib 文件夹。

6.GitHub下载

前往GitHub下载代码优化之后的 Element-ui@2.13.2 包，将下载下来的包替换项目里 node-module 下的 element-ui 文件夹或者将下载下来的包文件里的 lib 文件夹替换项目里 node-module 下的 element-ui 文件夹中的 lib 文件夹即可。
下载地址：https://github.com/colintaochen/ElementUI-2.13.2