可否将el-select 多选显示为一个图标’el-icon-s-operation‘,并且多选的选项为纵项排列的多选框’el-checkbox-group‘
时间: 2023-12-12 21:04:38 浏览: 102
可以实现将el-select多选显示为一个图标'el-icon-s-operation',并且多选的选项为纵项排列的多选框'el-checkbox-group'。具体实现方法如下:
1. 在el-select中添加一个slot,用于自定义多选的图标。
```html
<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>
```
2. 将el-option-group中的el-option替换为el-checkbox,并使用el-checkbox-group实现多选。
```html
<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>
```
这样,就能够将el-select多选显示为一个图标'el-icon-s-operation',并且多选的选项为纵项排列的多选框'el-checkbox-group'。
阅读全文