element-ui中checkbox用对象怎么绑定？

Question

官方文档里的

  <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>
  
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  
   data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
   }
   
   如果换成
   const cityOptions = [{'id':'1','name':'北京'},{'id':'2','name':'上海'}，{'id':'3','name':'深圳'} ];
   这种格式绑定的话 要怎么写呢 写了一下午 全选功能 不能实现
   直接name遍历所有获取id 再传给后台也太耗费性能了
   大神们 有啥好方法吗 感谢

Answer 1

<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cityOptions" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
  </el-checkbox-group>
  
  const cityOptions = [{'id':'1','name':'北京'},{'id':'2','name':'上海'}，{'id':'3','name':'深圳'} ];
  
   data() {
      return {
        checkAll: false,
        checkedCities: ['1', '2'],
        cities: cityOptions,
        isIndeterminate: true
      };
   }