vue+elementUIでel-autocompleteを使用してリモート検索を実現するドロップダウンボックスで注意すべき問題

2952 ワード

注意すべき点:
1、バックグラウンドで取得した配列の各オブジェクトには、autocompleteがvalueフィールドのみを認識し、ドロップダウン列に表示するため、valueフィールドが必要です.2、なぜselectのリモート検索ではなくinputコンポーネント群の下のel-autocompleteを選択したのですか?選択をクリックすると、選択した行の付属情報であるオブジェクトが取得されるため、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          
 })
}