三个一行的多选框组

公司需要实现三行一组的多选框，类似于底下的效果，这是我最初实现的，结果显而易见，被驳回了，理由就是我下面圈红框的部分，看着奇怪，不满足要求的三个一行

这种实现很简单，就使用了elmentui的布局组件，设置了每个宽度为三分之一，然后把数据做个遍历就行

 <el-checkbox-group
              v-model="productGroups"
            >
              <el-row :gutter="20">
                <el-col
                  v-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-row
                v-for="(childArr, index) in productGroup"
                :key="index"
                :gutter="20"
              >
                <el-col
                  v-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>