elment-ui+vue实现多选框遍历数组对象

来看这段代码：

<template>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkedCities: ['上海', '北京'],
        cities: cityOptions
      };
    }
  };
</script>

正常的通过checkbox遍历数组操作很明显不满工作需求，大多数时候需要遍历的是数组对象，个人接触到以下三种解决方案：

在el-checkbox-group中，v-model 的是el-checkbox中 label 绑定的值，即checkedCities是由任意个city组成的数组

1：v-model整个数组对象的子项【不支持反显】

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}];
  export default {
    data() {
      return {
        checkedCities: [],
        cities: cityOptions
      };
    }
  };
</script>

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

2：v-model整个数组对象的子项的key值【支持反显】

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}];
  export default {
    data() {
      return {
        checkedCities: [],
        cities: cityOptions
      };
    }
  };
</script>

在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：v-model整个数组对象【支持反显，可以加入输入框或者其他操作】

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

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

<template>
  <div v-for="city in cities" :label="city "  :key="city.id">
    <el-checkbox   v-model="city.isChecked">{{city.cityName}}</el-checkbox>
  </div>
</template>
<script>
  const cityOptions = [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}];
  export default {
    data() {
      return {
        checkedCities: [],
        cities: cityOptions
      };
    }
  };
</script>

我们不使用多选框组el-checkbox-group，直接循环数组对象，想实现取消勾选效果我们原数组缺少一个字段，这时我们可以给这个数组对象的每一项追加一个用来勾选的字段：isChecked；
当前如果项目中正好有可用的字段能用来表示选中和未选中状态，直接拿来用就没必要自行追加这个字段了
追加如下，必须使用$set，这样vue才能动态响应变化后的数组

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

这种办法其实是利用了vue的响应式，比如我们选择了上海

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

这种方法下我们还适应比较复杂的对象，比如我们需要在勾选框中追加输入框，只要在div的循环内新增el-input并绑定上相对应的值即可，还能响应的得到输入结果
这种方法下的反显，只要在初始对象中的isChecked值即可，初始化方式多种多样，可自行发挥