一、el-checkbox-group插槽
在使用 el-checkbox-group 时，我们可以通过插槽来自定义每个 checkbox 的内容。例如：
<el-checkbox-group v-model="checkedCities">
<el-checkbox label="Shanghai">上海</el-checkbox>
<el-checkbox label="Beijing">北京</el-checkbox>
<el-checkbox label="Guangzhou">广州</el-checkbox>
<el-checkbox label="Shenzhen">深圳</el-checkbox>
<template slot-scope="{ option }">
<el-checkbox :label="option.value">{{ option.label }}({{ option.value }})</el-checkbox>
</template>
</el-checkbox-group>
在上面的代码中，我们通过 slot-scope 定义了一个模板插槽 template，并将插槽绑定到 el-checkbox-group 组件上。
在 slot-scope 中，我们可以使用 option 来访问每个 checkbox 的 label 和 value 属性。
二、el-checkbox-group 第一次点击无效
在使用 el-checkbox-group 时，有一种情况是第一次点击 checkbox 无效。这是因为组件在第一次渲染时，还没有获取到数据，导致数据绑定失败。解决这个问题的方法是，给 el-checkbox-group 组件加上 key 属性，这样每次数据发生变化，组件就会重新渲染。
<el-checkbox-group v-model="checkedCities" :key="checkedCities">
<el-checkbox label="Shanghai">上海</el-checkbox>
<el-checkbox label="Beijing">北京</el-checkbox>
<el-checkbox label="Guangzhou">广州</el-checkbox>
<el-checkbox label="Shenzhen">深圳</el-checkbox>
</el-checkbox-group>
三、el-checkbox-group 数据过多页面卡
当数据过多时，每次操作 checkbox 都会导致页面卡顿。这时我们可以使用虚拟滚动技术，只渲染可见区域内的数据。
首先，我们需要引入 vue-virtual-scroller 插件：
npm install -S vue-virtual-scroller
然后，我们需要将 el-checkbox-group 组件替换成 vue-virtual-scroller 的 v-select 组件，并设置 virtual-scroll 属性为 true，即可实现虚拟滚动。
<vue-virtual-scroller v-model="selectedItems" :items="items" :item-size="40" virtual-scroll>
<template slot-scope="{ item }">
<el-checkbox :label="item">{{ item.label }}</el-checkbox>
</template>
</vue-virtual-scroller>
总结
el-checkbox-group 组件是一个非常实用的组件，能够方便地实现多选框的功能。同时，我们也需要注意组件的细节问题，如插槽的使用、第一次点击无效等问题。另外，当数据过多时，我们可以采用虚拟滚动技术来优化页面性能。希望本文对你有所帮助！
