在使用el-checkbox复选框编辑、回显时碰到的坑

最近两次使用el-checkbox复选框的时候，总是磕磕绊绊，还一直碰到坑，尤其是编辑回显的时候，所以在此记录一下：

根据后端要求，需要传递id过去，即‘1,2,3’这种的格式，但是el-checkbox复选框打印出来的结果是[‘美食’，‘玩具’，‘家具’]这种数组样式的，所以需要用label绑定的是id值。

<el-checkbox-group v-model="addFrom.frontName" @change="change($event)">
   <el-checkbox :label="item.id" v-for="item in preList" :key="item.id" >{{item.name }}</el-checkbox>
</el-checkbox-group>

其中，preList是后台传过来的复选框的对应的数组，格式如下：

[    
    {name: "美食", id: 0},
    {name: "玩具", id: 1},
    {name: "家具", id: 2}
]

此时选择复选框的时候change打印出来的是符合要求的，但是在回显编辑的时候，再次选择其他复选框的时候，无法进行勾选。这是因为没有渲染上去，需要在change事件中添加立即渲染的方法，也就是：

change() {
  this.$forceUpdate()
},

这样就解决了，编辑回显时再次选择的问题。

而另外一种解决办法是，将change事件绑定到el-checkbox上，而不是el-checkbox-group上，即：

<el-checkbox-group v-model="addFrom.frontName" >
   <el-checkbox :label="item.id" v-for="item in preList" :key="item.id" @change="change($event,item)">{{item.name }}</el-checkbox>
</el-checkbox-group>

change(e, item) {
  if (e) {
    this.addFrom.frontName.push(item.id)
  } else {
      if (this.addFrom.frontName.indexOf(item.id) != -1) {
         this.addFrom.frontName.splice(this.addFrom.frontName.indexOf(item.id), 1)
       }
  }
  this.addFrom.frontName = [...new Set(this.addFrom.frontName)]
  this.$forceUpdate()
},

其中e为true，意思是选中了当前的选项，item是传递过来的id及其name值，

选中则放进数组，取消选中则删除它。

最后也需要即时将其渲染上去。

这样同样也解决了编辑回显时再次选择的问题。