vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Sweet__Cat/article/details/79397071

需要注意的地方：

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 返回建议列表的数据
 })
}