公司需要实现三行一组的多选框，类似于底下的效果，这是我最初实现的，结果显而易见，被驳回了，理由就是我下面圈红框的部分，看着奇怪，不满足要求的三个一行
这种实现很简单，就使用了elmentui的布局组件，设置了每个宽度为三分之一，然后把数据做个遍历就行
<el-checkbox-groupv-model="productGroups"><el-row :gutter="20"><el-colv-for="item in productGroup":key="item.value":span="8"><div class="grid-content"><el-checkbox :label="item.value">{{item.label}}</el-checkbox></div></el-col></el-row></el-checkbox-group>这就是我上面最初版的代码，由于布局组件全部在一个el-row里的浮动会自动填充，但是我的高度不一定都是一样的，所以会出现下面这种效果。
有的人会不会想，既然是高度不一样，那你设置高度一样不就完了吗？
我刚开始也是这么想的，但是我又想到了，我们的项目是会国际化的，我不能保证其他语言的高度是多少，通过设置高度的思路不太现实，可能反而更复杂。
最终还是老老实实的，每一行都要有个el-row，然后把这些label数组改成一个二维数组，这样就保险了，
这是修改后的效果，上代码
数据处理成二维数组：
// 产品组productGroup() {let arr = Dic.find('DIC040')arr = arr.map((item) => {return {label: item.value + item.label,value: item.value,}})// 将数组处理成二维数组，每个数组包含3个元素const result = []for (let i = 0; i < arr.length; i += 3) {result.push(arr.slice(i, i + 3))}return result},HTML
<el-checkbox-group v-model="productGroups"><el-rowv-for="(childArr, index) in productGroup":key="index":gutter="20"><el-colv-for="item in childArr":key="item.value":span="8"><div class="grid-content"><el-checkbox :label="item.value">{{item.label}}</el-checkbox></div></el-col></el-row></el-checkbox-group>
