element-plus中,如何使用el-checkbox-group和el-checkbox来实现多选的功能,请给出例子
时间: 2025-06-21 20:04:22 浏览: 3
### 关于 Element Plus 中 `el-checkbox-group` 和 `el-checkbox` 的多选功能
以下是基于 Element Plus 提供的一个完整的示例代码,展示如何通过 `el-checkbox-group` 和 `el-checkbox` 实现多选功能:
```vue
<template>
<div>
<!-- 表单容器 -->
<el-form :model="form">
<!-- 质量体系认证字段 -->
<el-form-item label="质量体系认证:" prop="qualitySystem">
<!-- 使用 el-checkbox-group 绑定 v-model -->
<el-checkbox-group v-model="form.qualitySystem">
<!-- 单个复选框项 -->
<el-checkbox label="GMP">GMP</el-checkbox>
<el-checkbox label="GSP">GSP</el-checkbox>
<el-checkbox label="ISO9000">ISO9000</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<!-- 显示当前选中的选项 -->
<p>已选择的质量体系:{{ form.qualitySystem }}</p>
</div>
</template>
<script>
export default {
data() {
return {
// 定义表单数据模型
form: {
qualitySystem: [], // 初始化为数组,用于存储多个选中值
},
};
},
};
</script>
```
#### 解析
1. **`el-checkbox-group`** 是一个容器组件,它允许将一组 `el-checkbox` 进行绑定管理。它的核心特性在于可以通过 `v-model` 双向绑定到一个数组变量上[^1]。
2. **`el-checkbox`** 是具体的复选框组件,其 `label` 属性定义了该复选框对应的值。当用户点击某个复选框时,这个值会被自动添加或移除到父级 `el-checkbox-group` 所绑定的数组中[^2]。
3. 在上面的例子中,`form.qualitySystem` 初始是一个空数组,随着用户的操作动态更新。
如果需要初始化某些默认选中状态,则可以在 `data()` 方法中设置初始值。例如:
```javascript
form: {
qualitySystem: ['GMP', 'ISO9000'], // 默认勾选 GMP 和 ISO9000
},
```
此外,在实际项目开发过程中,可能还需要处理异步加载的数据源情况。可以利用 Vue 的响应式机制来动态更新 `v-model` 值。例如,使用 `watchEffect` 或者其他监听器完成数据同步[^3]。
---
阅读全文