vue2使用el-checkbox-group实现多选
时间: 2023-06-29 08:09:07 浏览: 117
可以按照以下步骤使用 `el-checkbox-group` 实现多选:
1. 在 Vue 组件中引入 `el-checkbox-group` 和 `el-checkbox` 组件:
```html
<template>
<el-checkbox-group v-model="checkedFruits">
<el-checkbox label="apple">Apple</el-checkbox>
<el-checkbox label="banana">Banana</el-checkbox>
<el-checkbox label="orange">Orange</el-checkbox>
</el-checkbox-group>
</template>
<script>
import { ElCheckboxGroup, ElCheckbox } from 'element-ui';
export default {
components: {
ElCheckboxGroup,
ElCheckbox,
},
data() {
return {
checkedFruits: [],
};
},
};
</script>
```
2. 定义一个数组 `checkedFruits` 用于存储选中的水果的值。
3. 在 `el-checkbox-group` 中使用 `v-model` 绑定 `checkedFruits` 数组,这样选中的水果值就会被存储在 `checkedFruits` 中。
4. 在 `el-checkbox` 组件中使用 `label` 属性指定水果的值。
5. 如果需要在表单中提交选中的水果值,可以将 `checkedFruits` 数组绑定到表单的 `v-model` 上,这样选中的水果值就会被提交给后端。例如:
```html
<template>
<form @submit.prevent="submitForm">
<el-checkbox-group v-model="checkedFruits">
<el-checkbox label="apple">Apple</el-checkbox>
<el-checkbox label="banana">Banana</el-checkbox>
<el-checkbox label="orange">Orange</el-checkbox>
</el-checkbox-group>
<button type="submit">Submit</button>
</form>
</template>
<script>
import { ElCheckboxGroup, ElCheckbox } from 'element-ui';
export default {
components: {
ElCheckboxGroup,
ElCheckbox,
},
data() {
return {
checkedFruits: [],
};
},
methods: {
submitForm() {
// 提交表单时将选中的水果值发送到后端
console.log(this.checkedFruits);
},
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)