Vue Autocomplete 自動(dòng)完成功能簡(jiǎn)單示例

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="請(qǐng)輸入內(nèi)容"
 @select="((item)=>{handleSelect(item, index)})">
</el-autocomplete>

methods: {
 querySearchAsync(queryString, callback) {
 var list = [{}];
 //調(diào)用的后臺(tái)接口
 //let url = 后臺(tái)接口地址 + queryString;
 //從后臺(tái)獲取到對(duì)象數(shù)組
 this.$http({
 url: this.$http.adornUrl('yjtgateway/goods'),
 method: 'get',
 params: this.$http.adornParams({keyword:queryString})
 }).then(({data}) => {
 for(let i of data.content){
 i.value = i.goodsCode; //將想要展示的數(shù)據(jù)作為value
 }
 list = data.content;
 callback(list);
 }).catch((error) => {
 console.log(error)
 })
 },
 handleSelect(item,index) {
 this.dataForm.items[index] = item
 }
}