博客

element官方文档中el-checkbox-group组件绑定的是基础数据类型(

string / number / boolean

)，但是最近开发项目过程中需要绑定数组对象结构的数据，那么在后端返回数据的时候是没办法在多选框回显的。


测试代码如下：

<template>
	<el-checkbox-group v-model="textdata">
	　　<el-checkbox v-for='(item, index) in textlist' :label="item" :key="index">{{item.lable}}
	　　</el-checkbox> 
	</el-checkbox-group>
</template>
<script>
export default {
	data () {
	    return {
	      textdata: [
		    {
		      value: '1001',
		      lable: '广州'
	        },
	        {
	          value: '1002',
	          lable: '佛山',
	        },
	       ], 
	      textlist: [
	        {
	          value: '1001',
	          lable: '广州'
	        },
	        {
	          value: '1002',
	          lable: '佛山',
	        },
	        {
	          value: '1003',
	          lable: '深圳'
	        },
	        {
	          value: '1004',
	          lable: '珠海'
	        }
	      ],
	    };
	  }
 }
</script>

既然elementui不支持绑定绑定值的数据类型是对象，那么就去解决elementui的问题。


1、找到项目对应版本的elementui源码并且按指定版本clone下来

2、找到checkbox组件的源代码（packages\checkbox\src\）



可以看出这里只用了数组的indexOf的方法，很显然并不满足我们的需求

3、修改elementui源码，使用JSON.stringify将原数组（this.model）和原目标数据（this.label）转换为 JSON 字符串，然后使用indexOf进行匹配

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

4、运行命令：npm run dist,将生成的lib包替换项目node-module的elementui 文件夹中的lib