vue+element-ui实现多选框绑定数组对象

现在我们有一个数组对象 ： const cityOptions = [{id: 1, cityName: ‘上海’}, {id: 2, cityName: ‘北京’}];

1 :label = city，直接绑定对象【不支持反显】

在v-for="city in cities"中，我们得到的city是整个子项(如勾选了上海):{id: 1, cityName: ‘上海’}，
v-model得到的是: [{id: 1, cityName: ‘上海’}]，如果不需要对得到的结果进行二次处理，还能动态的得到所需整个数组对象的子集，这种办法就很合适。（但是这种办法我还没能实现数据的反显 ）

2 :label = city.id，绑定对象的id【支持反显】

在v-for="city in cities"中，我们得到的city是整个子项(如勾选了上海):{id: 1, cityName: ‘上海’}，el-checkbox的label绑定的是city.id，即我们v-model得到的是: [1]，这种情况下，我们可以存着checkedCities的值，如：const checkedList= […checkedCities] ;
** 反显的时候，给checkedCities设置初值，this.checkedCities = checkedList；即可得到反显之后的结果。 **

3 不使用el-checkbox-group，直接循环el-checkbox【支持反显，并追加多选框功能】

参考这段代码，当我们仅使用el-checkbox时，v-model一个bool值，即可实现勾选和取消勾选的操作

参考这段代码，当我们仅使用el-checkbox时，v-model一个bool值，即可实现勾选和取消勾选的操作

 

如果没有用来判断是否选中的字段，可自行追加。
追加代码如下，必须使用$set，这样vue才能动态响应变化后的数组

this.cities.forEach(cityItem => {
  this.$set(cityItem ,  'isChecked',  false)
})

 这种办法其实是利用el-checkbox来改变的 isChecked 的值，比如选择了上海

我们得到的响应之后的cities的值为：
[{id: 1, cityName: ‘上海’, isChecked:true}, {id: 2, cityName: ‘北京’, isChecked:false}]

这种方法下可以尽情增加自定义的功能，可以嵌入其他的form:

1. 追加输入框，只要在div的循环内新增el-input并绑定上相对应的值即可，还能响应的得到输入结果

** 这种方法下的反显，只需要控制好isChecked的初始值即可，初始化方式多种多样，可自行发挥 **