在elementUI中使用 el-autocomplete 實現帶搜索建議的輸入框

想實現的效果

 

實現方法

<el-autocomplete
v-model="detail.CUSTOMER_NAME"
:fetch-suggestions="querySearchAsync"
@select="handleSelect"
placeholder="請輸入內容"
>
</el-autocomplete>

 在script中添加下面兩個函數

//queryString 為在框中輸入的值
//callback 回調函數,將處理好的數據推回
querySearchAsync(queryString, callback) {
var list = [{}];
//調用的后台接口
let url = 后台接口地址 + queryString;
//從后台獲取到對象數組
axios.get( url ).then((response)=>{
//在這里為這個數組中每一個對象加一個value字段, 因為autocomplete只識別value字段並在下拉列中顯示
for(let i of response.data){
i.value = i.想要展示的數據; //將想要展示的數據作為value
}
list = response.data;
callback(list);
}).catch((error)=>{
console.log(error);
});
}

 @select="handleSelect"  是選中某一列觸發的事件,在這里item為選中字段所在的對象

handleSelect(item) {
    console.log(item);
    //do something
}

需要注意的地方:

后台獲取的數組中每一個對象必須要有一個value字段, 因為autocomplete只識別value字段並在下拉列中顯示

這里獲取數據使用axios, 需要安裝並引入