一. HTML
<el-autocomplete popper-class="my-autocomplete" v-model = "sname"
:fetch-suggestions="querySearchAsync"
placeholder="搜索国家,比如意大利"
@select="handleSelect">
<template slot-scope="props">
<div class="name">
<img :src="props.item.avatar" class="img-rounded" style="width: 25px;height: 25px">
{{ props.item.label }}
</div>
</template>
</el-autocomplete>
二. JS
querySearchAsync(queryString, cb){
var sr = [];
if (queryString != undefined && queryString.length > 0){
axios.post(suggestUrl,{
sw:queryString
}).then(function(response){
console.log(response);
var r = response.data;
if (r.result == 0){
console.log(r);
var data = r.data;
if (data.length > 0){
cb(data);
}else{
cb(data);
}
}else{
cb(sr);
}
});
}else{
cb(sr);
}
},
handleSelect(item){
this.sid = item.id;
this.label = item.label;
}
三. 服务端
返回对应数据,需要数组