el-checkbox-group绑定数据为对象的回显问题

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值