1. 程式人生 > >vue+elementUI中使用 el-autocomplete 實現遠端搜尋的下拉框需要注意的問題

vue+elementUI中使用 el-autocomplete 實現遠端搜尋的下拉框需要注意的問題

需要注意的地方:

1、後臺獲取的陣列中每一個物件必須要有一個value欄位, 因為autocomplete只識別value欄位並在下拉列中顯示。
2、為什麼選擇input元件群下的el-autocomplete 而不是select下的遠端搜尋?
因為點選選中時可獲取到選中行的附帶資訊即一個物件, 而select元件下的遠端搜尋只能選中點選的字串。

html如下:

<el-autocomplete
 name="selCar" 
 v-model="selCar"
 @select="checkCar" 
 placeholder="查詢車輛:" 
 :trigger-on-focus
="false">
</el-autocomplete>

js如下:

checkCar(item) {  //選中資訊獲取後臺資料,在這裡item為選中欄位所在的物件
  this.carId = parseInt(item.id);
  this.companyId = parseInt(item.companyId);
  this.$http.get("/vehicle/detail/" + this.carId,
  ).then((response) => {
    this.checkCarInfo = response.data.data;
    if (!this
.checkCarInfo.qualification) { this.checkCarInfo.qualification = this.qualificationDefault(); } this.cheCarBox = true; }); this.carCheckCompany() //根據車查詢所屬公司詳情 }, queryCar(str, cb) { this.$http.get("/vehicle/suggestion/need_owner", //車輛建議列表 { params: { vehicleNo: str, companyId: this
.companyId, } } ).then((response) => { for (let i of response.data.data) { i.value = i.vehicleNo; //ps:必須為每個物件增加value欄位!!因為autocomplete只識別value欄位並在下拉列中顯示 } let sugList = response.data.data;//陣列 if (sugList.length === 0) { sugList = [{value: '暫無資料'}] } cb(sugList);// 呼叫 callback 返回建議列表的資料 }) }