用 element ui select控件 实现远程搜索
时间: 2023-12-03 07:43:34 浏览: 38
可以使用 Element UI 的 Select 控件结合远程搜索功能来实现。下面是一个简单的示例代码:
```vue
<template>
<div>
<el-select
v-model="selectedValue"
remote
filterable
remote-method="remoteSearch"
:loading="loading"
:remote-method="remoteSearch"
:loading-text="'Searching...'"
:no-match-text="'No matching results'"
:value-key="'value'"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
loading: false,
options: []
};
},
methods: {
remoteSearch(query) {
this.loading = true;
// 发起远程请求,根据 query 获取匹配的数据
// 假设远程请求返回的数据格式为 [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]
setTimeout(() => {
// 模拟异步请求
this.loading = false;
this.options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' }
];
}, 1000);
}
}
};
</script>
```
上述代码中,我们使用了 `remote` 属性来开启远程搜索的功能,通过 `remote-method` 属性指定了远程搜索的方法名 `remoteSearch`。在 `remoteSearch` 方法中,你可以发起异步请求,根据用户输入的 `query` 参数获取匹配的数据,并将结果赋值给 `options` 数组。同时,我们使用了 `loading` 属性来展示加载状态。
这样,当用户在 Select 控件中输入内容时,会触发 `remoteSearch` 方法进行远程搜索,并根据搜索结果动态更新下拉选项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)