需求描述

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

实现及踩坑记录

使用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 = thislet noArr = [],  // 订单号历史记录数组text = '', value = ''switch (type) {case 'srcOrderNo':text = 'srcOrderNoArr'value = self.srcOrderNobreakcase 'jobOrderNo':text = 'jobOrderNoArr'value = self.jobOrderNobreakcase 'cntNo':text = 'cntNoArr'value = self.cntNobreakdefault:break}noArr.push({value: value, type: type})if(JSON.parse(localStorage.getItem(text))) {  // 判断是否已有xxx查询记录的localStorageif(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))}}
}

参考

1. vue中使用localStorage存储信息
2. element-ui带输入建议的input框踩坑