Element輸入框帶歷史查詢記錄

sewerganger 發布于2019-08-23 14:42 / 743人閱讀

摘要：需求描述頁面的查詢框增加一下顯示歷史查找記錄實現及踩坑記錄使用帶輸入建議的輸入框來實現此需求。

需求描述

頁面的查詢框增加一下顯示歷史查找記錄

實現及踩坑記錄

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

參考

vue中使用localStorage存儲信息

element-ui帶輸入建議的input框踩坑

GPU云服務器云服務器輸入框歷史記錄獲取網站歷史記錄查詢記錄歷史歷史記錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101015.html

tradingView-webSocket進階——Vue.js

摘要：無奈，還是需要對這份代碼進行加工。功能缺少，主要指業務邏輯實現上的功能缺少。缺少的功能主要是歷史記錄獲取展示的功能。查詢緩存是否為空，如果為空，表示數據還沒有下發，后再查詢一次。如果有數據，取到當前數據，執行回調。前幾天寫了一篇關于tradingView和webSocket的文章傳送門，因為代碼本身還在整合中，所以比較混亂，而且也沒有demo可以運行。這兩天在GitHub上面看到了一...

levius 2019-08-23 13:11 評論0 收藏0
前端：將網站打造成單頁面應用SPA（一）

摘要：可以在各個頁面間傳遞數據，不依賴。可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲。減少了請求體積，節省流量，加快頁面響應速度。將返回的替換到頁面中。不過這個參數目前并無作用，瀏覽器目前會選擇忽略它。前言不知你有沒有發現，像Github、百度、微博等這些大站，已經不再使用普通的a標簽做跳轉了。他們大多使用Ajax請求替代了a標簽的默認跳轉，然后使用HTML5的新API...

youkede 2019-08-21 10:33 評論0 收藏0
滬江前端由H5頁面引起的一場前端數據結構討論

摘要：發送請求，處理數據。在上面這個場景中，這類數據的結構可能是最常碰到的。整個過程可以簡化成數據的變化引起視圖的變化，和現在很多前端框架數據驅動思想有幾分相似。至此一個對于頁面的抽象出來的數據結構雛形基本完成了。作者：周周（滬江資深Web前端開發工程師）本文為原創文章，轉載請注明作者及出處前言近期在小D十周年活動之際，又看到了一個自家H5專題夢工廠生成的頁面。 showImg(htt...

xialong 2019-08-20 19:03 評論0 收藏0
滬江前端由H5頁面引起的一場前端數據結構討論

摘要：發送請求，處理數據。在上面這個場景中，這類數據的結構可能是最常碰到的。整個過程可以簡化成數據的變化引起視圖的變化，和現在很多前端框架數據驅動思想有幾分相似。至此一個對于頁面的抽象出來的數據結構雛形基本完成了。作者：周周（滬江資深Web前端開發工程師）本文為原創文章，轉載請注明作者及出處前言近期在小D十周年活動之際，又看到了一個自家H5專題夢工廠生成的頁面。 showImg(htt...

Genng 2019-08-29 13:18 評論0 收藏0