关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题
1.问题背景
2.解决方案
1.把 element 源码克隆到本地
2.安装依赖
3.查找文件
4.替换代码
5.重新打包
6.GitHub下载
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
element UI 官方文档中，el-checkbox-group组件绑定值都是一维字符串数组（如上图所示），但在实际项目开发中，往往需要绑定一维对象数组来满足项目需求。以下图为例，在某绩效项目中，对模板配置动态绩效指标时，绩效指标的绑定值需要绑定一维对象数组，官方el-checkbox-group已不能满足项目需求。
2.解决方案
1.把 element 源码克隆到本地
git clone https:///ElemeFE/element.git
或者下 zip 包 https:///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;
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:///colintaochen/ElementUI-2.13.2
