我们经常会使用element ui的el-checkbox-group来作为复选框组件。实例如下：

<template>
  <el-checkbox-group 
    v-model="checkedCities"
    :min="1"
    :max="2">
    <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>

但是现实开发中遇到了一个问题，就是选中某一个复选框我需要传递一个对象而不是一个字符串值，并且在使用v-for循环中，我们通常也是附加一个对象而不是单单的一个属性，所以这里就需要稍微变通一下。如下所示：

<el-checkbox-group v-model="checkList">
   <el-checkbox :label="item" v-for="(item,index) in checkedList" :key="index" >{{item.name}}</el-checkbox>
 </el-checkbox-group>

如代码所示，通过实践后发现v-model="checkList"得到的数据来自于<el-checkbox 中的label，也就是说label是一个字符串，那就是一个字符串列表，label是一个对象，那得到的checkList就是一个对象列表。那这样就简单了，我们显示的lable直接写到标签内，也就是item.name。这样就解决了对象传递问题。

还有一点，怎么控制checkbox的显示，其实这里不用checkbox的checked属性，而是checkList里面有就会选中，没有就不会选中。所以控制显示就是控制checkList数据驱动啦。所以简单的使用checkbox和CheckBoxgroup在api上还是有不同的，这点需要注意，反正对于我们来说，越简单越好。