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

---

---

<template><el-checkboxv-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-checkboxv-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; 是为了限制复选框容器的最大宽度，避免复选框宽度过大导致布局变形。根据实际需求，你可以调整这个最大宽度值。