來看這段代碼：

<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值即可，初始化方式多種多樣，可自行發揮