Element UI 多选框回显选中

Question

<el-checkbox-group v-model="dataForm.effectiveDate">
<el-checkbox-button v-for="(item, index) in checkList" :label="item.name" :key="index" @change="updateCheckBox(index)" ></el-checkbox-button>
</el-checkbox-group>

// 渲染的集合
checkList:[
        {"name": "周一", "value": "1", "flag": true},
        {"name": "周二", "value": "2", "flag": true},
        {"name": "周三", "value": "3", "flag": true},
        {"name": "周四", "value": "4", "flag": true},
        {"name": "周五", "value": "5", "flag": true},
        {"name": "周六", "value": "6", "flag": true},
        {"name": "周日", "value": "7", "flag": true}
      ],

各位前端大神，请问这个element ui怎么实现编辑的时候回显选中？

还有个问题就是，点击编辑弹出编辑页面后，我点击一个多选框就全部选中了再点击一下就全取消选中了。

 

Answer 1

选中与否 要设置单个按钮的属性 不要设置按钮组的属性

在button绑定V-model