element-plus自动补全输入框 远程搜索示例axios示例
时间: 2023-09-29 08:10:10 浏览: 55
以下是一个使用 Element-Plus 的自动补全输入框进行远程搜索的示例,使用 Axios 进行数据请求:
```html
<template>
<el-autocomplete
v-model="inputValue"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
:loading="loading">
</el-autocomplete>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
inputValue: '',
loading: false,
};
},
methods: {
querySearchAsync(queryString, callback) {
if (queryString) {
this.loading = true;
axios.get('/api/search', { params: { q: queryString } })
.then(response => {
this.loading = false;
callback(response.data);
})
.catch(() => {
this.loading = false;
});
} else {
callback([]);
}
},
},
};
</script>
```
上述代码中,`el-autocomplete` 组件的 `fetch-suggestions` 属性绑定了一个方法 `querySearchAsync`,在用户输入时会自动调用该方法进行搜索。`querySearchAsync` 方法通过 Axios 发送 GET 请求,参数为输入框中的内容,获取到搜索结果后调用回调函数 `callback` 将结果返回给输入框展示。`loading` 属性用于控制加载状态。