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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Element输入框带历史查询记录的实现示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1816字，纯文字阅读大概需要3分钟。

内容图文

需求描述

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

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))
   }
  }
}

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

内容总结

以上是互联网集市为您收集整理的Element输入框带历史查询记录的实现示例全部内容，希望文章能够帮你解决Element输入框带历史查询记录的实现示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/333537.html

来源：【匿名】