在elementUI中使用 el-autocomplete 實現遠程搜索的下拉框

在template中添加標籤

<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, 須要安裝並引入

爲何選擇input組件羣下的el-autocomplete 而不是select下的遠程搜索?
由於點擊選中時可獲取到選中行的附帶信息即一個對象, 而select組件下的遠程搜索只能選中點擊的字符串。