在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元件下的遠端搜尋只能選中點選的字串.