前段时间,在实现带输入建议并且支持模糊查询输入框的时候,发现了两个值得注意的小地方。整理出来,以供借鉴。

废话不多说,直接来解决问题。

踩坑问题描述:

问题一:

获取到后端返回的数组,并将数组传入作为 results 传入 callback 后,焦点放在 输入框 上的时候,并未出现任何内容,只出现了一个不完整的空白框。

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题) 

问题解决方案:

这个问题开始我以为是传进 callbackdata 格式不对。Element官网上是这么写的:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

我传入的是对象数组,是没问题的。

后来我仔细阅读了 Elemen t带建议查询输入框的 Demo 代码并查阅相关资料发现,输入建议列表的数据只来源于
data:[] 中的 value 字段!!!

于是,我将后端传回的 response 处理了,将 response 中需要展示的字段组成 {value:'输入建议'} 这种格式,问题解决。

 searchAppNodeApi(searchQuery).then((response) => {
     this.loadAll = response.data
     this.devEuiArr = [];
     for (var i = 0; i < this.loadAll.length; i++) {
      this.devEuiArr.push({"value1": this.loadAll[i].dev_eui})
     }
    })

searchAppNodeApi() 是我请求后端的api方法,拿到请求成功的回调函数的 response 参数。但是, response 里面包含很多我不需要的字段,我只需要其中的 dev_eui 字段。因此,循环 response.data 将其中每条的 dev_eui 重组成 {value:'输入建议'} 的格式并 push 进声明的新数组 devEuiArr

打印如下:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

正确效果如下:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

问题二:

成功出现输入建议列表后,出现一个新的问题,并且 Element 官网的 Demo 代码并未阐述这种情况,就是当我获取到输入建议列表后,切换成另一个输入建议列表,会先闪一下上一个出现的输入建议列表,切换后的输入列表为空也会闪出上个输入建议列表,就算手动清空 callback(data:[]) 中的 data 数组也无济于事。

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

问题解决方案:

这个问题开始我以为是需要返回数据后手动清空 callback 里面的 data 数组,像下面这样:

//联想查询时触发
   querySearch(queryString, callback) {
    var results = queryString "text-align: center">element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

debounce函数去抖 "htmlcode">

<el-autocomplete
     placeholder="请输入DEVEUI"
     v-model="searchDeveuiVal"
     clearable
     :fetch-suggestions="querySearch"
     size="small"
     :debounce=0
     @keyup.enter.native="searchAppNode">
 </el-autocomplete>

正确效果如下:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
element-ui,input输入框,element-ui,input

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。