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

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

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

踩坑问题描述：

问题一：

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

问题解决方案：

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

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

后来我仔细阅读了 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 官网的 Demo 代码并未阐述这种情况，就是当我获取到输入建议列表后，切换成另一个输入建议列表，会先闪一下上一个出现的输入建议列表，切换后的输入列表为空也会闪出上个输入建议列表，就算手动清空 callback（data:[]） 中的 data 数组也无济于事。

问题解决方案：

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

//联想查询时触发
   querySearch(queryString, callback) {
    var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr
    // 调用 callback 返回建议列表的数据
    callback(results)
    results = ''
   }

但是一点作用没起，也就是跟变量缓存没什么关系，后来我在 Element 官网的一个小角落发现这么一个参数：

debounce ？ 函数去抖 ? 应该就是它了！
（PS：不了解函数去抖和函数节流的同学可以阅读我的下一篇博文。）

debounce 的默认值是 300ms，我们将其设置为 0ms。

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

正确效果如下：

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

赞 (0)

相关推荐

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • vue Element-ui input 远程搜索与修改建议显示模版的示例代码

    html: <template> <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click=&q

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

    前段时间,在实现带输入建议并且支持模糊查询输入框的时候,发现了两个值得注意的小地方.整理出来,以供借鉴. 废话不多说,直接来解决问题. 踩坑问题描述: 问题一: 获取到后端返回的数组,并将数组传入作为 results 传入 callback 后,焦点放在 输入框 上的时候,并未出现任何内容,只出现了一个不完整的空白框. 问题解决方案: 这个问题开始我以为是传进 callback 的 data 格式不对.Element官网上是这么写的: 我传入的是对象数组,是没问题的. 后来我仔细阅读了 Elem

  • Mint UI组件库CheckList使用及踩坑总结

    Import 按需引入: import { Checklist } from 'mint-ui'; Vue.component(Checklist.name, Checklist); 全局导入:全局导入后不用再导入 importMintfrom'mint-ui' import'mint-ui/lib/style.css' Vue.use(Mint); API 示例 示例一: xxx.vue: <template> <div id="app"> <mt-ch

  • vue中的input框点击后不聚焦问题

    目录 input框点击后不聚焦问题 vue input聚焦的坑 点击按钮,使某个input框聚焦 加载页面时自动聚焦 [坑] input框点击后不聚焦问题 废话不多说直接上代码 哪个地方要写input框  就直接把这一部分代码放上   里面双向绑定的值和事件换上自己定义的  <div class="item" @click.stop.prevent="inputPaentClick('input1')">         <input      

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    目录 问题描述 实现效果 实现代码 问题描述 在开发时遇到一个数字区间输入框的需求,如下图: 项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用. 实现效果 实现效果如下: 使用方式如

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

随机推荐