需求形貌

页面的查询框增添一下显现汗青查找纪录

完成及踩坑纪录

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

参考

1. vue中运用localStorage存储信息
2. element-ui带输入发起的input框踩坑