el-checkbox-group内循环展示checkbox

### 使用 `el-checkbox-group` 和 `v-for` 循环渲染复选框

为了在 Element UI 中使用 `el-checkbox-group` 组件并利用 Vue.js 的 `v-for` 指令来循环渲染多个复选框，可以按照如下方法操作：

#### HTML 结构与绑定数据模型
创建一个 `<el-checkbox-group>` 容器，并为其设置 `v-model` 属性用于双向绑定所选中的项数组。接着，在该容器内使用带有 `v-for` 指令的 `<el-checkbox>` 来遍历选项列表。

<template>
  <div class="email-checkbox">
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox :label="option.value" v-for="(option, index) in options" :key="index">{{ option.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 存储已选择的值
      options: [
        { value: 'Option1', label: '选项一' },
        { value: 'Option2', label: '选项二' },
        { value: 'Option3', label: '选项三' }
      ]
    };
  }
};
</script>

上述代码展示了如何定义一组可供选择的项目以及初始化状态变量 `selectedOptions` 来保存用户的输入[^1]。

#### 设置样式调整布局
对于 `.email-checkbox` 类下的 `.el-checkbox` 元素应用特定宽度和间距，以便更好地控制页面上的显示效果。这有助于确保当有大量复选框时它们能够整齐排列而不至于显得杂乱无章。

.email-checkbox {
  padding: 20px 0 0 20px;
  text-align: left;

  .el-checkbox {
    width: 33.33%;
    margin: 10px 0 10px;
  }
}

此 CSS 片段来自给定的例子，它使得每个复选框占据父级容器三分之一的空间，并设置了上下边距以增加视觉间隔。