废话不多说,直接上代码:
<div v-for="(item,index) in ceshidata" :key="item.id">
<el-checkbox-group v-model="item.csDates">
<el-checkbox
v-for="(csDates, idx) in csDatesList)"
:key="idx"
:label="csDates"
>{{ csDates.name }}</el-checkbox
>
</el-checkbox-group>
</div>
官网上直接这样写就可以了,但是在上线的时候发现,只有第一组出来的复选框是可以选的,其他 组的复选框都不能选,而且选第一组的复选框的时候,有的时候会连带其他组的一块都被选中了,于是修改成
<div v-for="(item,index) in ceshidata" :key="item.id">
<el-checkbox-group v-model="item.csDates">
<el-checkbox
v-for="(csDates, idx) in csDatesList)"
@change="handleChange($event,idx,csDates)"
:key="idx"
:label="csDates"
>{{ csDates.name }}</el-checkbox
>
</el-checkbox-group>
</div>
在去console.log (this.ceshidata)发现,其实数据是有被选中和取消的,就是视图上没有发生更新,在各种折腾下,最后发现在handleChange,方法里,
用
this.$forceUpdate();
给他强制更新一下就好了,目前没有找到更有用的方法,比较简单暴力!