(vue)el-checkbox-group怎么指定列数整齐显示

(vue)el-checkbox-group怎么指定列数整齐显示

<template>
   <el-checkbox
    v-if="ziduanOptions.length !== 0"
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >全选</el-checkbox>
  <div style="margin: 15px 0" />
  <el-checkbox-group v-model="checkboxList">
    <div style="display: flex; flex-wrap: wrap; max-width: 600px;">
      <el-checkbox
        v-for="(item, index) in checkboxOptions"
        :key="index"
        :label="item.label"
        style="flex: 0 0 20%;"
      ></el-checkbox>
    </div>
  </el-checkbox-group>
</template>
 
<script>
export default {
  data() {
    return {
      checkboxList: [], // 绑定选中的复选框值
      checkboxOptions: [ // 复选框选项
        { label: 'Option A' },
        { label: 'Option B' },
        { label: 'Option C' },
        // ... 更多选项
      ],
    };
  },
};
</script>

在这个例子中，el-checkbox-group 绑定了一个数组 checkboxList 来存储选中的复选框的值。el-checkbox 组件通过v-for指令进行循环渲染，并通过style属性设置了flex: 0 0 33.3333%，这样每个复选框的宽度为父容器宽度的1/3，从而使得复选框按照3列排列。

注意：max-width: 600px; 是为了限制复选框容器的最大宽度，避免复选框宽度过大导致布局变形。根据实际需求，你可以调整这个最大宽度值。