526互联

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

发布时间 2023-07-11 18:30:21作者: sunny123456

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

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

  1. 结构写法
  2. <el-autocomplete
  3.   v-model.trim="invoiceHeaderInformation.gmfMc"
  4.   :fetch-suggestions="querySearch"
  5.   :trigger-on-focus="false"
  6.   type="text"
  7.   :popper-class="className"
  8.   placeholder="请输入名称"
  9.   class="td_inputSearch"
  10.   @select="handleSelect"
  11. />

在结构中需要注意的是 

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

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

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

定义数据

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

方法编写

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

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

  1. getList () {
  2.   let that = this
  3.   that.loading = true;
  4.   axios({
  5.     url: , // 查询接口 nologin/college
  6.     method: 'post',
  7.     data: {
  8.       
  9.     }
  10.   }).then(res => {
  11.     // 在这里来获取返回的数据 this.qympArrObject.push 
  12.     res.data.forEach((v, index) => {
  13.       // 下拉框值进行赋值
  14.       that.qympArrObject.push({ 'value': v.qymc }) // 必须是这种格式
  15.     })
  16.     // 渲染客户名称搜索下拉框的值
  17.     this.gmfmcItems = this.loadAll()
  18.   }).catch(error => {
  19.     this.$notify({
  20.       message: error.message,
  21.       type: 'error'
  22.     })
  23.     that.loading = false
  24.     throw error
  25.   })
  26. },
  27. handleSelect(item) {
  28.   const that = this
  29.   setTimeout(() => {
  30.     // 进行回显数据（远程搜索选择一条数据，对其他数据进行回显操作在这里进行处理）
  31.     }
  32.   }, 50)

监听调用

监听一个对象的方法

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

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

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

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