el-autocomplete的数据如何从服务端获取数据
时间: 2023-05-21 17:02:06 浏览: 576
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
el-autocomplete的数据可以通过发送异步请求从服务端获取数据。具体来说,可以使用axios或者fetch等工具库发送请求,将服务端返回的数据存储在一个数组中,然后将这个数组作为el-autocomplete的data属性的值即可。以下是一个示例代码:
```
<template>
<el-autocomplete
v-model="inputValue"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
></el-autocomplete>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
inputValue: '',
suggestions: []
};
},
methods: {
querySearchAsync(queryString, cb) {
axios.get('/api/search', { params: { q: queryString } })
.then(response => {
this.suggestions = response.data;
cb(this.suggestions);
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
```
在这个示例中,el-autocomplete的fetch-suggestions属性绑定了一个名为querySearchAsync的方法,该方法会在用户输入内容时自动调用。该方法会发送一个GET请求到/api/search接口,并将用户输入的内容作为查询参数q的值。服务端返回的数据会存储在suggestions数组中,并通过回调函数cb返回给el-autocomplete组件。用户输入的内容会通过v-model绑定到inputValue属性上。
阅读全文