可否将el-select 多选显示为一个图标’el-icon-s-operation‘,并且多选的选项为纵项排列的多选框’el-checkbox-group‘ 请示例完整代码
时间: 2023-12-12 07:04:38 浏览: 24
好的,以下是完整的代码示例:
```html
<template>
<div>
<el-select v-model="selectedOptions" multiple>
<template slot="prefix">
<i class="el-icon-s-operation"></i>
</template>
<el-option-group v-for="(group, index) in options" :key="index" :label="group.label">
<el-checkbox-group v-model="group.children">
<el-checkbox v-for="item in group.options" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
</el-checkbox-group>
</el-option-group>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
label: '颜色',
options: [
{ label: '红色', value: 'red' },
{ label: '蓝色', value: 'blue' },
{ label: '黄色', value: 'yellow' },
{ label: '绿色', value: 'green' }
],
children: []
},
{
label: '尺寸',
options: [
{ label: '大', value: 'large' },
{ label: '中', value: 'medium' },
{ label: '小', value: 'small' }
],
children: []
}
]
};
}
};
</script>
```
在这个示例中,我们使用el-select组件和el-checkbox-group组件实现了多选功能,并在el-select组件中添加了一个slot,用于自定义多选的图标。同时,我们将el-option替换为el-checkbox,使用el-checkbox-group实现多选,并且让多选框纵向排列。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)