el-select多选tag数值
时间: 2023-07-24 21:06:13 浏览: 156
在el-select中多选时,可以设置最大可选数量和已选数量,但是没有直接设置tag数值的选项。可以通过设置自定义模板来实现类似tag的效果。具体实现方法如下:
1. 在el-select中设置multiple属性,开启多选模式。
2. 在el-select中设置max-tag-count属性,限制显示tag的最大数量。
3. 在el-select中设置placeholder属性,用于显示已选数量。
4. 在el-select中设置filterable属性,开启搜索功能。
5. 在el-select中设置clearable属性,允许清空已选项。
6. 在el-select中设置v-model属性,绑定已选项列表。
7. 在el-select中设置自定义模板,将已选项列表渲染成tag的样式。
以下是一个示例代码:
```
<el-select
v-model="selectedItems"
multiple
filterable
clearable
max-tag-count="3"
placeholder="已选 {{ selectedItems.length }} 项"
>
<template #tags>
<el-tag
v-for="(item, index) in selectedItems"
:key="index"
closable
@close="removeSelected(index)"
>
{{ item }}
</el-tag>
</template>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
```
在上面的代码中,selectedItems是一个数组,用于存储已选项列表。removeSelected方法用于删除已选项。options是可选项列表,根据实际情况进行设置即可。通过自定义模板中的el-tag标签,将已选项渲染成tag的样式,达到类似tag的效果。max-tag-count属性限制了最多显示3个tag,placeholder属性显示已选项数量。
阅读全文