成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Element輸入框帶歷史查詢(xún)記錄

sewerganger / 762人閱讀

摘要：需求描述頁(yè)面的查詢(xún)框增加一下顯示歷史查找記錄實(shí)現(xiàn)及踩坑記錄使用帶輸入建議的輸入框來(lái)實(shí)現(xiàn)此需求。

需求描述 
頁(yè)面的查詢(xún)框增加一下顯示歷史查找記錄

實(shí)現(xiàn)及踩坑記錄

使用Element帶輸入建議的輸入框來(lái)實(shí)現(xiàn)此需求。用法詳見(jiàn)官網(wǎng)

1. 坑1：不能直接在querySearch里返回?cái)?shù)組，一定要調(diào)用回調(diào)函數(shù)cb來(lái)處理數(shù)據(jù)

看了一下例子，建議列表應(yīng)該是個(gè)數(shù)組，然后我就在querySearch里直接返回了一個(gè)數(shù)組：

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

但是回到網(wǎng)頁(yè)上卻發(fā)現(xiàn)列表數(shù)據(jù)加載不出來(lái)

正確姿勢(shì)：

 /**
 * 建議列表
 */
querySearch(queryString, cb) {
  // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
  cb(JSON.parse(localStorage.getItem("srcOrderNoArr")))
}
2. 坑2：數(shù)組內(nèi)數(shù)據(jù)格式有要求，格式一定要是[{value: "", xxx: ""}, {value: "", xxx: ""}, ...]

這個(gè)建議列表是根據(jù)數(shù)組內(nèi)的value屬性值來(lái)渲染的，所以數(shù)組內(nèi)的對(duì)象一定要有value鍵值對(duì)。比如說(shuō)是這樣的：

data () {
    return {
        srcOrderNoArr: [{
            value: "",  // 這個(gè)必須要有
            type: ""
        },
        {
            value: "",
            type: ""
        },
        {
            value: "",
            type: ""
        }]
   }
}
methods: {
    /**
     * 把搜索記錄存入localStorage
     */
    setIntoStorage (type) {
      let self = this
      let noArr = [],  // 訂單號(hào)歷史記錄數(shù)組
        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查詢(xún)記錄的localStorage
        if(localStorage.getItem(text).indexOf(value) > -1 ) {  // 判斷是否已有此條查詢(xún)記錄，若已存在，則不需再存儲(chǔ)
          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 {  // 首次創(chuàng)建
        localStorage.setItem(text, JSON.stringify(noArr))
      }
    }
}
參考

vue中使用localStorage存儲(chǔ)信息

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101015.html

相關(guān)文章

  • tradingView-webSocket進(jìn)階——Vue.js

    摘要：無(wú)奈，還是需要對(duì)這份代碼進(jìn)行加工。功能缺少，主要指業(yè)務(wù)邏輯實(shí)現(xiàn)上的功能缺少。缺少的功能主要是歷史記錄獲取展示的功能。查詢(xún)緩存是否為空，如果為空，表示數(shù)據(jù)還沒(méi)有下發(fā)，后再查詢(xún)一次。如果有數(shù)據(jù)，取到當(dāng)前數(shù)據(jù)，執(zhí)行回調(diào)。 前幾天寫(xiě)了一篇關(guān)于tradingView和webSocket的文章傳送門(mén)，因?yàn)榇a本身還在整合中，所以比較混亂，而且也沒(méi)有demo可以運(yùn)行。這兩天在GitHub上面看到了一...

    levius 評(píng)論0 收藏0

  • 前端：將網(wǎng)站打造成單頁(yè)面應(yīng)用SPA（一）

    摘要：可以在各個(gè)頁(yè)面間傳遞數(shù)據(jù)，不依賴(lài)?？梢赃x擇性的保留狀態(tài)，如音樂(lè)網(wǎng)站，切換頁(yè)面時(shí)不會(huì)停止播放歌曲。減少了請(qǐng)求體積，節(jié)省流量，加快頁(yè)面響應(yīng)速度。將返回的替換到頁(yè)面中。不過(guò)這個(gè)參數(shù)目前并無(wú)作用，瀏覽器目前會(huì)選擇忽略它。 前言 不知你有沒(méi)有發(fā)現(xiàn)，像Github、百度、微博等這些大站，已經(jīng)不再使用普通的a標(biāo)簽做跳轉(zhuǎn)了。他們大多使用Ajax請(qǐng)求替代了a標(biāo)簽的默認(rèn)跳轉(zhuǎn)，然后使用HTML5的新API...

    youkede 評(píng)論0 收藏0

  • 滬江前端由H5頁(yè)面引起的一場(chǎng)前端數(shù)據(jù)結(jié)構(gòu)討論

    摘要：發(fā)送請(qǐng)求，處理數(shù)據(jù)。在上面這個(gè)場(chǎng)景中，這類(lèi)數(shù)據(jù)的結(jié)構(gòu)可能是最常碰到的。整個(gè)過(guò)程可以簡(jiǎn)化成數(shù)據(jù)的變化引起視圖的變化，和現(xiàn)在很多前端框架數(shù)據(jù)驅(qū)動(dòng)思想有幾分相似。至此一個(gè)對(duì)于頁(yè)面的抽象出來(lái)的數(shù)據(jù)結(jié)構(gòu)雛形基本完成了。 作者：周周（滬江資深Web前端開(kāi)發(fā)工程師）本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明作者及出處 前言 近期在小D十周年活動(dòng)之際，又看到了一個(gè)自家H5專(zhuān)題夢(mèng)工廠(chǎng)生成的頁(yè)面。 showImg(htt...

    xialong 評(píng)論0 收藏0

  • 滬江前端由H5頁(yè)面引起的一場(chǎng)前端數(shù)據(jù)結(jié)構(gòu)討論

    摘要：發(fā)送請(qǐng)求，處理數(shù)據(jù)。在上面這個(gè)場(chǎng)景中，這類(lèi)數(shù)據(jù)的結(jié)構(gòu)可能是最常碰到的。整個(gè)過(guò)程可以簡(jiǎn)化成數(shù)據(jù)的變化引起視圖的變化，和現(xiàn)在很多前端框架數(shù)據(jù)驅(qū)動(dòng)思想有幾分相似。至此一個(gè)對(duì)于頁(yè)面的抽象出來(lái)的數(shù)據(jù)結(jié)構(gòu)雛形基本完成了。 作者：周周（滬江資深Web前端開(kāi)發(fā)工程師）本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明作者及出處 前言 近期在小D十周年活動(dòng)之際，又看到了一個(gè)自家H5專(zhuān)題夢(mèng)工廠(chǎng)生成的頁(yè)面。 showImg(htt...

    Genng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<