el-checkbox-group 的v-model无法绑定对象数组的问题解决
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
到此这篇关于解决el-checkbox-group 的v-model无法绑定对象数组的文章就介绍到这了,更多相关解决el-checkbox-group 的v-model无法绑定对象数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现学生信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
vue中beforeRouteLeave实现页面回退不刷新的示例代码
这篇文章主要介绍了vue中beforeRouteLeave实现页面回退不刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家详细介绍了vue+ts实现元素鼠标拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家详细介绍了Vue实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了ant-design-vue中tree增删改的操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了vue 插值表达式Mustache的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了Vue.js如何使用Socket.IO的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
在Vue项目中,Markdown文档的使用越来越普遍,因此在Vue中如何进行Markdown文档展示与解析也成为了一个热门话题,本文将介绍如何使用Vue实现Markdown文档的展示和解析,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue 3.0 使用ref获取dom元素,包括vue2.x获取dom和vue3.0获取单个dom，通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue父组件如何获取子组件的值,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论