代码
页面
<el-autocomplete
class="inline-input"
v-model="Search.storeName"
:fetch-suggestions="QuerySalesOrderShop"
placeholder="输入搜索"
@select="handleSelectSalesOrderShop"
size="mini"
clearable
></el-autocomplete>
data
Search: {
storeName: '', // 门店名称
storeId: '', // 门店id
},
salesOrderShopArr: [], // 门店数组
methods
// 获取门店数据
QuerySalesOrderShop (queryString, cb) {
util.publicpost('get', url, {}, function (res) { // 请求接口
if (res.code === 0) {
var results = []
if (res.data !== null) {
for (let i = 0, len = res.data.length; i < len; i++) {
res.data[i].value = res.data[i].storeName;
}
this.salesOrderShopArr = res.data
results = queryString ? this.salesOrderShopArr.filter(this.createFilter(queryString)) : this.salesOrderShopArr;
}
cb(results);
}
});
},
createFilter(queryString, queryArr) {
return (queryArr) => {
return (queryArr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
// 选择门店信息
handleSelectSalesOrderShop (item) {
this.Search.storeId = item.storeId
},
注意点
从后台获取的数组要进行数据处理，为数组的每一个对象添加一个value属性，值为你想要显示的值, 因为autocomplete只识别value字段并在下拉列中显示。
