el-select 一个选项可以重复选择多次
时间: 2023-07-25 17:10:36 浏览: 441
el-select 组件默认情况下不支持一个选项可以重复选择多次。如果需要实现一个选项可以重复选择多次,可以使用 el-select 的远程搜索功能结合 el-option 的 label 和 value 属性来实现。
具体步骤如下:
1. 将 el-select 的 filterable 属性设置为 true,启用搜索功能。
2. 在 el-select 上监听 input 事件,当用户输入时,调用远程搜索接口获取选项列表。
3. 在 el-option 上设置 label 和 value 属性,其中 label 属性可以用来显示选项名称,value 属性可以用来识别选项。
4. 在 el-select 上使用 v-model 指令绑定选择的选项,这个值将是一个数组,用来保存选择的选项的 value 值。
下面是一个基本的示例代码:
```html
<template>
<el-select v-model="selectedOptions" filterable @input="handleInput">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 用来保存选择的选项值的数组
options: [] // 用来保存所有的选项的数组
}
},
methods: {
handleInput(value) {
// 调用远程搜索接口获取选项列表,这里直接使用 mock 数据
this.options = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
]
}
}
}
</script>
```
在上面的代码中,我们使用了 mock 数据来模拟远程搜索接口的返回结果,实际使用时需要根据实际情况来修改代码。通过设置 label 和 value 属性,我们可以将选项的显示名称和值分别与 el-option 组件关联起来。在 el-select 上使用 v-model 指令绑定 selectedOptions 数组,用来保存用户选择的选项的值。由于 el-select 组件的 filterable 属性被设置为 true,用户可以通过输入来搜索选项。当用户输入时,我们通过监听 input 事件来调用 handleInput 方法,获取选项列表并更新 options 数组。
阅读全文