最近几天适用vue-cli3.x结合element-ui做后台管理发现编辑时el-checkbox-group回显不了，并且要点击两次才能选择，在网上搜索，没有见到什么解决办法，就自己在哪里瞎琢磨，最后发现问题就是在提交和返回的数据这里

我跟后台约定提交什么，还返回什么，可是实际返回的数据却无法渲染，最后使用遍历的方式从多选框的数据源取出了对应的数据，然后用这些数据渲染就可以正常显示了
如果这样还不行，那就取出返回数据里面的id，代码如下：
vue代码：



<el-checkbox v-model=“ruleForm.orderCheckAll” :indeterminate=“isOrderIndeterminate” :disabled=“ruleForm.scopeApplicationType2" @change=“handleOrderCheckAllChange”>全部
<el-checkbox-group v-model=“ruleForm.checkedOrders” :disabled="ruleForm.scopeApplicationType2” @change=“handleCheckedOrderChange”>
{{ order.name }}




script代码：
this.applyOrder=[{ id: 1, name: ‘一口价订单’ }, { id: 2, name: ‘拍卖’ }, { id: 4, name: ‘直播’ }] //el-checkbox-group的数据源，用来渲染列表
var orderArr = JSON.parse(this.ruleForm.scopeOrder) //后台返回的数据是JSON格式： “[{“id”:1,“name”:“一口价订单”},{“id”:2,“name”:“拍卖”}]” ，先parse一下,如果后台直接返回数组就不用
var idsArr=[]
for(var i=0;i<orderArr.length;i++){//取出id
idsArr.push(orderArr[i].id)
}
var arr = []
for(var i=0;i<this.applyOrder.length;i++){
if(idsArr.indexOf(this.applyOrder[i].id)>-1){
console.log(orderArr.indexOf(this.applyOrder[i]))
arr.push(this.applyOrder[i])
}
}
this.ruleForm.checkedOrders = arr //然后把取出来的数据赋值给表单中v-model绑定的字段
我提交的格式是[{id:1,name:‘一口价’},{id:2,name:‘拍卖’}],后台智能接收字符串，我就JSON.stringfy了一下才提交，就是选择了什么就提交什么，并不是取出id提交，可能是后台操作后再返回这样导致数据相关属性缺失，从而不能使页面实时更新

反正问题解决了，感觉真的很坑，所以记录一下，顺便提醒一下小伙伴