Element输入框带历史查询记录的实现示例

需求描述

页面的查询框增加一下显示历史查找记录

实现及踩坑记录

使用Element带输入建议的输入框来实现此需求。用法详见官网

1. 坑1：不能直接在querySearch里返回数组，一定要调用回调函数cb来处理数据

看了一下例子，建议列表应该是个数组，然后我就在querySearch里直接返回了一个数组：

 querySearch(queryString, cb) {
  return JSON.parse(localStorage.getItem('srcOrderNoArr'))
 },

但是回到网页上却发现列表数据加载不出来

正确姿势：

 /**
 * 建议列表
 */
querySearch(queryString, cb) {
 // 调用 callback 返回建议列表的数据
 cb(JSON.parse(localStorage.getItem('srcOrderNoArr')))
}

2. 坑2：数组内数据格式有要求，格式一定要是[{value: '', xxx: ''}, {value: '', xxx: ''}, ...]

这个建议列表是根据数组内的value属性值来渲染的，所以数组内的对象一定要有value键值对。比如说是这样的：

data () {
  return {
    srcOrderNoArr: [{
      value: '', // 这个必须要有
      type: ''
    },
    {
      value: '',
      type: ''
    },
    {
      value: '',
      type: ''
    }]
  }
}
methods: {
  /**
   * 把搜索记录存入localStorage
   */
  setIntoStorage (type) {
   let self = this
   let noArr = [], // 订单号历史记录数组
    text = '', value = ''
   switch (type) {
    case 'srcOrderNo':
     text = 'srcOrderNoArr'
     value = self.srcOrderNo
     break
    case 'jobOrderNo':
     text = 'jobOrderNoArr'
     value = self.jobOrderNo
     break
    case 'cntNo':
     text = 'cntNoArr'
     value = self.cntNo
     break
    default:
     break
   }
   noArr.push({value: value, type: type})
   if(JSON.parse(localStorage.getItem(text))) { // 判断是否已有xxx查询记录的localStorage
    if(localStorage.getItem(text).indexOf(value) > -1 ) { // 判断是否已有此条查询记录，若已存在，则不需再存储
     return
    }
    if(JSON.parse(localStorage.getItem(text)).length >= 5) {
     let arr = JSON.parse(localStorage.getItem(text))
     arr.pop()
     localStorage.setItem(text, JSON.stringify(arr))
    }
    localStorage.setItem(text, JSON.stringify(noArr.concat(JSON.parse(localStorage.getItem(text)))))
   }
   else { // 首次创建
    localStorage.setItem(text, JSON.stringify(noArr))
   }
  }
}

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

赞 (0)

相关推荐

  • vue中Element-ui 输入银行账号每四位加一个空格的实现代码

    一.问题描述: 我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格.那么,在vue,element-ui 组件中,如何实现呢? 二.效果图: 三.实现代码: <el-table-column prop="account" label="银行账号"> <template slot-scope="scope"> <el-input type="text" maxlength=&q

  • element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css&quo

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

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

  • Element输入框带历史查询记录的实现示例

    需求描述 页面的查询框增加一下显示历史查找记录 实现及踩坑记录 使用Element带输入建议的输入框来实现此需求.用法详见官网 1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函数cb来处理数据 看了一下例子,建议列表应该是个数组,然后我就在querySearch里直接返回了一个数组: querySearch(queryString, cb) { return JSON.parse(localStorage.getItem('srcOrderNoArr')) }, 但是回到

  • SQL查询日志 查看数据库历史查询记录的方法

    好吧,到数据库日志中去找找,通过时间.关键字批配..能想到的全用上吧. 首先假定你执行过它.没有?好吧,要么它太过简单,要么你太过不简单.. 复制代码 代码如下: SELECT TOP 1000 --创建时间 QS.creation_time, --查询语句 SUBSTRING(ST.text,(QS.statement_start_offset/2)+1, ((CASE QS.statement_end_offset WHEN -1 THEN DATALENGTH(st.text) ELSE

  • linux中 shell 历史命令记录功能

    在 Linux 下面可以使用 history 命令查看用户的所有历史操作,同时 shell 命令操作记录默认保存在用户目录的 .bash_history 文件中.通过这个文件可以查询 shell 命令的执行历史,有助于运维人员进行系统审计和问题排查,同时在服务器遭受黑客攻击后,也可以查询黑客登录服务器的历史命令操作.但是黑客在入侵后,为了抹除痕迹,会删除 .bash_history 文件,这个就需要合理备份这个文件了. 默认的 history 命令只能查看用户的历史操作记录,但是不能区分每个用户

  • Layui选项卡制作历史浏览记录的方法

    在很多情况下我们需要使用到历史浏览记录这一个功能,自己制作起来有点麻烦,但是layui的element模块给我们带来了不少的功能,这个模块就是Tab选项卡,例如以下的样式. 这里是侧边导航样式的部分代码,id用于Tab的lay-id,Url_index是自定义属性,用来存放需要跳转到页面路径,span标签里的文本就是用于Tab的标题. <ul class="sub"> <li><span id="Organization" Url_in

  • 解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题

    问题描述:在使用laravel的左联接查询的时候遇到一个问题,查询中带了右表一个筛选条件,导致结果没有返回右表为空的记录. 先附上代码: DB::table('users as u') ->select('u.user_id','c.class') ->leftJoin('class as c','c.user_id','=','u.user_id') ->where('c.status','=',2) ->get(); 解决方案: 1.在mysql的角度上说,直接加where条件

  • python解析Chrome浏览器历史浏览记录和收藏夹数据

    python解析Chrome浏览器历史浏览记录和收藏夹数据

    目录 前言 (一)查询chrome数据缓存地址 (二)提取收藏夹数据 1.文件路径 2.解析代码 (三)查看浏览历史数据 1.文件路径 2.解析代码 (四)完整代码&测试代码 总结 前言 常使用chrome浏览器作为自己的默认浏览器,也喜欢使用浏览器来收藏自己的喜欢的有用的链接,自己也做了一个记录笔记的小脚本,想扩展收录chrome浏览器收藏夹的内容,,下面,,使用python提取chrome浏览器的历史记录,以及收藏夹. (一)查询chrome数据缓存地址 1.打开 chrome浏览器,输入

  • Mybatis查询记录条数的实例代码

    这几天在学SSM框架,今天在SSM框架中根据某个条件查询MySQL数据库中的记录条数,碰到一些问题,记录一下 User.xml <select id="userNameValidate" parameterType="String" resultType="Integer"> select count(*) from user where username like #{value} </select> <selec

  • input 标签实现输入框带提示文字效果(两种方法)

    input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5

  • 数据库查询记录php 多行多列显示

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • MySQL随机查询记录的效率测试分析

    以下就是文章的主要内容. 1.SELECT * FROM `table` ORDER BY RAND() LIMIT 5 就可以了. 但是真正测试一下才发现这样效率非常低.一个15万余条的库,查询5条数据,居然要8秒以上 查看官方手册,也说rand()放在ORDER BY 子句中会被执行多次,自然效率及很低. You cannot use a column with RAND() values in an ORDER BY clause, because ORDER BY would evalu

随机推荐