vue2在下拉框中使用el-checkbox-group实现多选
时间: 2023-12-20 22:08:47 浏览: 156
可以通过以下步骤在Vue2中使用`el-checkbox-group`实现下拉框多选:
1. 引入`el-checkbox-group`和`el-checkbox`组件:
```javascript
import { CheckboxGroup, Checkbox } from 'element-ui';
```
2. 在`template`中使用`el-checkbox-group`和`el-checkbox`组件:
```html
<el-dropdown>
<span class="el-dropdown-link">
下拉框 <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-checkbox-group v-model="selectedOptions">
<el-checkbox v-for="option in options" :label="option.value" :key="option.value">{{ option.label }}</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="submit">确定</el-button>
</el-dropdown-menu>
</el-dropdown>
```
3. 在`data`中定义选项和选中的值:
```javascript
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
],
selectedOptions: []
}
}
```
4. 在`methods`中定义提交方法:
```javascript
methods: {
submit() {
console.log(this.selectedOptions);
}
}
```
这样就可以实现一个简单的下拉框多选功能。
阅读全文
相关推荐
![](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://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)