el-select 远程搜索回显
时间: 2023-08-29 08:13:42 浏览: 345
element-ui 远程搜索组件el-select在项目中组件化的实现代码
el-select 远程搜索回显的实现需要以下步骤:
1. 使用 el-select 的 remote 方法来实现远程搜索功能;
2. 在 remote 方法中,将搜索关键字作为参数传递给后端接口,并获取接口返回的搜索结果;
3. 在 el-select 的 filterable 属性中设置为 true,开启搜索功能;
4. 在 el-select 的 remote-method 属性中设置一个函数,用于在搜索时调用 remote 方法并更新 el-select 的下拉列表的选项;
5. 在 remote 方法中,将后端接口返回的搜索结果映射为 el-select 的下拉列表选项,并将这些选项作为参数传递给 remote 方法的回调函数;
6. 在回调函数中,更新 el-select 的下拉列表的选项。
以下是一个示例代码:
```html
<el-select
v-model="value"
remote
filterable
:remote-method="getOptions"
:loading="loading"
>
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
```
```javascript
export default {
data() {
return {
value: '',
options: [],
loading: false,
};
},
methods: {
getOptions(query) {
if (query !== '') {
this.loading = true;
// 调用后端接口获取搜索结果
this.$http.get('/api/search', { params: { q: query } }).then(res => {
this.loading = false;
// 将搜索结果映射为 el-select 的下拉列表选项
const options = res.data.results.map(result => ({
value: result.id,
label: result.name,
}));
// 调用回调函数更新 el-select 的下拉列表的选项
this.options = options;
});
} else {
this.options = [];
}
},
},
};
```
阅读全文