修改el-select用 Tag 展示已选项
时间: 2023-07-27 21:32:42 浏览: 54
您可以使用 el-select 的 tag 属性来展示已选项。具体做法如下所示:
```HTML
<el-select
v-model="value"
placeholder="请选择"
multiple
filterable
remote
:remote-method="remoteMethod"
:loading="loading"
:tag="true"
collapse-tags
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
```
在上面的示例中,我们设置了 el-select 的 tag 属性为 true,表示使用 Tag 展示已选项。我们也使用了 collapse-tags 属性来将多个 Tag 折叠成一个 Tag,从而节省空间。此外,我们也开启了多选和远程搜索功能,并在远程搜索时显示 loading 状态。
注意,展示已选项的效果会因为 tag、multiple、filterable 等属性的不同而有所区别。您可以根据自己的需求来调整这些属性的值,以达到最佳的展示效果。
相关问题
修改el-select用 Tag 展示已选项,只能单选
如果您需要在单选情况下使用 Tag 展示已选项,可以将 el-select 的 multiple 属性去掉即可,具体做法如下所示:
```HTML
<el-select
v-model="value"
placeholder="请选择"
filterable
remote
:remote-method="remoteMethod"
:loading="loading"
:tag="true"
collapse-tags
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
```
在上面的示例中,我们将 el-select 的 multiple 属性去掉,以达到只能单选的效果,同时仍然使用 Tag 展示已选项。其他部分的代码与上一个回答中的示例相同。
需要注意的是,当 el-select 只能单选时,使用 Tag 展示已选项的效果可能并不理想。因为 Tag 是用于展示多选情况下的已选项的,所以在单选情况下,您也可以考虑使用自定义模板来展示已选项,效果可能更好。
修改el-select用自定义模板来展示已选项
如果您需要使用自定义模板来展示已选项,可以使用 el-select 的 scoped slot,具体做法如下所示:
```HTML
<el-select
v-model="value"
placeholder="请选择"
filterable
remote
:remote-method="remoteMethod"
:loading="loading"
>
<template #default="{value}">
<span>{{ value.label }}</span>
</template>
<template #selected="{value}">
<el-tag closable :key="value.value" @close="handleClose(value)">
{{ value.label }}
</el-tag>
</template>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item"
></el-option>
</el-select>
```
在上面的示例中,我们使用了两个 scoped slot 来自定义 el-select 的展示效果。其中,default slot 用于渲染下拉列表中的选项,selected slot 用于渲染已选项。我们在 selected slot 中使用了 el-tag 组件来展示已选项,并在标签上绑定了一个 @close 事件,以便用户可以删除已选项。同时,我们还在 el-select 中传入了一个 label 为 value 的对象,这个对象包含了已选项的 label 和 value 属性。
需要注意的是,当 el-select 使用自定义模板来展示已选项时,您需要在选项的 value 属性中传入一个对象,这个对象包含了要展示的 label 和 value 属性,以便在 selected slot 中正确地渲染已选项。同时,您还需要自行处理已选项的删除操作,即在 @close 事件中删除对应的选项。