element ui的远程搜索

先说需求吧

一个搜索框，客户选择客户GID查询，输入gid，则把gid传给后端查询，若客户选择客户名称查询，则显示下拉搜索框，供客户选择名称，但客户选择名称后，还是发给后端对应的客户gid进行查询，客户在页面上是无感知的。

 示例：（element ui的远程搜索）

 在页面使用后，发现搜索结果不尽如人意，有时会出现输入框中的输入结果与下拉的搜索结果不一致，分析与观察过后，发现是接口请求的数据已经返回来了，但是输入框中的动作才刚发生，出现渲染上去的结果不符合的效果。

后面借鉴一位老哥博文完成此功能，老哥博文链接：输入框远程搜索_~牧马~-CSDN博客_远程搜索

接下来是我的实现代码：

<el-autocomplete
   placeholder="输入相关内容"
   v-model.trim="customer"
   class="width-320 margin-right-10"
   size="mini"
   @keyup.enter.native="search"
   @select="handleSelect"
   :fetch-suggestions="querySearchAsync"
   v-if="customerType == 'userName'"
>
  <el-select class="width-120" size="mini" v-model="customerType" slot="prepend" placeholder="请选择">
    <el-option :label="confirmStatus === '2' ? '被转售方GID' : '客户GID'" value="gid"></el-option>
    <el-option label="转售方GID" value="sellGid" v-if="confirmStatus === '2'"></el-option>
    <el-option label="客户名称" value="userName"></el-option>
   </el-select>
 </el-autocomplete>

监听tab切换，改一下请求数据的参数（不同的tab里面的客户类型不一样）

watch:{
    activeIndex(newV,oldV){
      this.restaurants=[]
      switch(newV){
        case '1' : this.owner = 'CURRENT_USER'
          this.clear()
          break;
        case '2' : this.owner = 'FOLLOWER'
          this.clear()
          break;
        case '0' : this.owner = 'ALL'
          this.clear()
          break;
      }
    },
  },

 下面是相关方法：

querySearchAsync(queryString,cb){
  var string = String(queryString)
  if(string.length > -1){//每次输入的字符串长度大于等于0就请求
     const params = {}
     params.customStage = 'CUSTOM'
     params.owner = this.owner
     params.pageSize = 20
     params.customName= this.customer
     this.$$(this.$c.getClientList(),params).then(res => {
       this.restaurants = res.data.list.map(({customName,guid})=>({value:customName,gid:guid}))
       cb(this.restaurants)//接口返回的数据放在回调函数中，格式要求array：[{id:1,value:"Tom"},{id:2,value:"网三"},{id:3,value:"汉鸿"}]，必有value属性
     })
   }
 },
 handleSelect(item) {  //item包含了你选择的人员的属性
   this.guid=item.gid //根据需求返回后端客户gid
 },

相对比一下官网的，我个人认为效果好一点，效果理想一点。

注：个人遇到的问题，在此记录，方便日后会看复习！！！