elementUI远程搜索功能遇到的坑（el-autocomplete） 如果是提前加载出全量数据 去掉v-model.trim换为 v-model=“nameinputvalue”

elementUI远程搜索功能遇到的坑（el-autocomplete） 如果是提前加载出全量数据 去掉v-model.trim换为 v-model=“nameinputvalue”
原文链接：https://blog.csdn.net/CuiCui_web/article/details/95939746

本文主要是解决下拉框根据返回值隐藏     动态设置建议列表值等问题

结构写法
<el-autocomplete
  v-model.trim="invoiceHeaderInformation.gmfMc"
  :fetch-suggestions="querySearch"
  :trigger-on-focus="false"
  type="text"
  :popper-class="className"
  placeholder="请输入名称"
  class="td_inputSearch"
  @select="handleSelect"
/>

在结构中需要注意的是 

:popper-class="className" 用来动态控制下拉框（建议列表）的样式

@select="handleSelect"  用来处理选择了建议列表某一项之后的操作

:fetch-suggestions="querySearch"  返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它

定义数据

className:'', // 动态设置远程下拉框的样式
qympArrObject: [], // 远程下拉框的数组集合
timeout: null, // 设置时间
gmfmcItems: [], // 名称
invoiceHeaderInformation:{gmfMc:''} // 双向绑定的数据

方法编写

/** 客户名称搜索 */
querySearch(queryString, cb) {
  // 调用 callback 返回建议列表的数据
  // cb(results)
  this.timeout = setTimeout(() => {
    var gmfmcItems = this.gmfmcItems
    var results = queryString ? gmfmcItems.filter(this.createFilter(queryString)) : gmfmcItems
    cb(results)
  }, 1000)
},
由于返回的值有延时加载时间，故而这里的时间设置很重要，必须要设置，否则就显示不出来数据
/** 创建客户名称搜索 */
createFilter(queryString) {
  return (gmfmcItems) => {
    return (gmfmcItems.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
  }
},
/** 客户名称搜索下拉框数据定义 */
loadAll() {
  var that = this
  return that.qympArrObject  // 返回请求接口的数据
},

/** 接口请求数据方法*/

getList () {
  let that = this
  that.loading = true;
  axios({
    url: , // 查询接口 nologin/college
    method: 'post',
    data: {
      
    }
  }).then(res => {
    // 在这里来获取返回的数据 this.qympArrObject.push 
    res.data.forEach((v, index) => {
      // 下拉框值进行赋值
      that.qympArrObject.push({ 'value': v.qymc }) // 必须是这种格式
    })
    // 渲染客户名称搜索下拉框的值
    this.gmfmcItems = this.loadAll()
  }).catch(error => {
    this.$notify({
      message: error.message,
      type: 'error'
    })
    that.loading = false
    throw error
  })
},
handleSelect(item) {
  const that = this
  setTimeout(() => {
    // 进行回显数据（远程搜索选择一条数据，对其他数据进行回显操作在这里进行处理）
    }
  }, 50)

监听调用

监听一个对象的方法

'invoiceHeaderInformation.gmfMc': {
  handler(newVal, oldVal) {
   // 当输入框的值的长度大于1才进行调用接口
    if (newVal.length > 1) {
      this.getList()
      // 当返回的数组没有数据的时候，给远程下拉框添加新的样式
      this.className = this.qympArrObject.length>0 ? '' : 'popperClassName'
    }else{
      // 当输入框的长度小于或等于1的时候，给远程下拉框添加新的样式
      this.className = 'popperClassName'
    }
  },
  deep: true
}

这里涉及到一个需求定义，如果输入框的值是大于1的开始调用接口，否则就不显示下拉框；如果返回的有数值，显示下拉框，否则就不显示下拉框。

动态样式处理（覆盖elementUI的样式）

<style lang="scss">
  // 动态给远程下拉框设置样式
  .popperClassName{
    display: none !important;
    position: static !important;
  }
</style>