c/c++语言开发共享关于element ui 的Checkbox 多选框el-checkbox-group的一点点思考

我们经常会使用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上还是有不同的，这点需要注意，反正对于我们来说，越简单越好。

c/c++开发分享关于element ui 的Checkbox 多选框el-checkbox-group的一点点思考地址：https://blog.csdn.net/Mr_carry/article/details/107933531