vue3使用el-checkbox-group

### Vue 3 中 Element Plus 的 `el-checkbox-group` 使用方法 在 Vue 3 中，Element Plus 是 Element UI 的升级版本，专门适配 Vue 3。它提供了丰富的组件集合，其中包括 `el-checkbox` 和 `el-checkbox-group` 组件。这些组件可以用来创建多选框组，并绑定到数据模型。 以下是详细的使用说明以及示例： #### 属性 `el-checkbox-group` 主要用于管理一组复选框的状态。它的核心属性包括： - **v-model**: 双向绑定的数据源，通常是一个数组，表示当前被选中的选项。 - **size**: 设置尺寸大小（可选值为 `medium`, `small`, 或 `mini`），该属性仅在按钮样式下生效[^1]。 #### 子组件 `el-checkbox` 每个单独的复选框可以通过 `el-checkbox` 来定义，其主要属性包括： - **label**: 表示单个复选框对应的值。 - **disabled**: 是否禁用此复选框。 - **border**: 添加边框样式。 #### 示例代码 以下是一个完整的示例，展示如何在 Vue 3 中使用 `el-checkbox-group` 实现多选功能并设置纵向排列布局。 ```html <template> <div> <!-- 纵向排列 --> <el-checkbox-group v-model="selectedValues" style="display: flex; flex-direction: column;"> <el-checkbox label="Option 1">选项一</el-checkbox> <el-checkbox label="Option 2">选项二</el-checkbox> <el-checkbox label="Option 3">选项三</el-checkbox> </el-checkbox-group> <p>已选择：{{ selectedValues }}</p> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const selectedValues = ref([]); // 初始化为空数组 return { selectedValues, }; }, }; </script> ``` 上述代码通过 `style="display: flex; flex-direction: column;"` 将复选框垂直堆叠显示[^2]。同时，利用 `v-model` 动态绑定了一个响应式的数组变量 `selectedValues`，当用户勾选或取消某个复选框时，这个数组会自动更新。 #### 结合动态数据渲染 如果需要从后台获取数据或者基于某些条件生成复选框列表，则可以采用如下方式： ```html <template> <el-checkbox-group v-model="dynamicSelected"> <el-checkbox v-for="(item, index) in optionsList" :key="index" :label="item.value">{{ item.label }}</el-checkbox> </el-checkbox-group> </template> <script> import { ref } from 'vue'; export default { setup() { const dynamicSelected = ref([]); const optionsList = [ { value: 'A', label: '苹果' }, { value: 'B', label: '香蕉' }, { value: 'C', label: '橙子' } ]; return { dynamicSelected, optionsList, }; }, }; </script> ``` 在此例子中，我们通过循环遍历 `optionsList` 数组来动态生成多个复选框项[^3]。 --- ###