el-input 远程搜索 多选实现代码
时间: 2024-05-02 19:17:28 浏览: 65
好的,关于 el-input 远程搜索多选的实现,可以参考下面的代码:
```
<el-select
v-model="selectedItems"
multiple
filterable
remote
reserve-keyword
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in items"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<script>
export default {
data() {
return {
selectedItems: [],
items: [],
loading: false
};
},
methods: {
remoteMethod(query) {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.items = [{
value: 'item1',
label: 'Item 1'
}, {
value: 'item2',
label: 'Item 2'
}, {
value: 'item3',
label: 'Item 3'
}];
}, 1000);
}
}
};
</script>
```
其中,el-select 组件设置了 multiple 多选,filterable 过滤,remote 远程搜索,reserve-keyword 保留关键字,同时绑定了一个 selectedItems 数组用于存储选中的值。
另外,remote-method 方法用于处理远程搜索,其中通过 setTimeout 模拟了异步请求数据的过程,并在请求完成后将数据存储到 items 数组中。
这是一个简单的 el-input 远程搜索多选实现的示例,你可以根据自己的需求进行相应的修改。
阅读全文