資訊專欄INFORMATION COLUMN
摘要：需求描述頁面的查詢框增加一下顯示歷史查找記錄實現(xiàn)及踩坑記錄使用帶輸入建議的輸入框來實現(xiàn)此需求。
需求描述
頁面的查詢框增加一下顯示歷史查找記錄實現(xiàn)及踩坑記錄
使用Element帶輸入建議的輸入框來實現(xiàn)此需求。用法詳見官網(wǎng)
看了一下例子，建議列表應(yīng)該是個數(shù)組，然后我就在querySearch里直接返回了一個數(shù)組：
querySearch(queryString, cb) {
return JSON.parse(localStorage.getItem("srcOrderNoArr"))
},
但是回到網(wǎng)頁上卻發(fā)現(xiàn)列表數(shù)據(jù)加載不出來
正確姿勢：
/**
* 建議列表
*/
querySearch(queryString, cb) {
// 調(diào)用 callback 返回建議列表的數(shù)據(jù)
cb(JSON.parse(localStorage.getItem("srcOrderNoArr")))
}
這個建議列表是根據(jù)數(shù)組內(nèi)的value屬性值來渲染的，所以數(shù)組內(nèi)的對象一定要有value鍵值對。比如說是這樣的：
data () {
return {
srcOrderNoArr: [{
value: "", // 這個必須要有
type: ""
},
{
value: "",
type: ""
},
{
value: "",
type: ""
}]
}
}
methods: {
/**
* 把搜索記錄存入localStorage
*/
setIntoStorage (type) {
let self = this
let noArr = [], // 訂單號歷史記錄數(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查詢記錄的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 { // 首次創(chuàng)建
localStorage.setItem(text, JSON.stringify(noArr))
}
}
}
參考
vue中使用localStorage存儲信息
element-ui帶輸入建議的input框踩坑
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101015.html
摘要：無奈，還是需要對這份代碼進行加工。功能缺少，主要指業(yè)務(wù)邏輯實現(xiàn)上的功能缺少。缺少的功能主要是歷史記錄獲取展示的功能。查詢緩存是否為空，如果為空，表示數(shù)據(jù)還沒有下發(fā)，后再查詢一次。如果有數(shù)據(jù)，取到當前數(shù)據(jù)，執(zhí)行回調(diào)。 前幾天寫了一篇關(guān)于tradingView和webSocket的文章傳送門，因為代碼本身還在整合中，所以比較混亂，而且也沒有demo可以運行。這兩天在GitHub上面看到了一...
摘要：可以在各個頁面間傳遞數(shù)據(jù)，不依賴。可以選擇性的保留狀態(tài)，如音樂網(wǎng)站，切換頁面時不會停止播放歌曲。減少了請求體積，節(jié)省流量，加快頁面響應(yīng)速度。將返回的替換到頁面中。不過這個參數(shù)目前并無作用，瀏覽器目前會選擇忽略它。 前言 不知你有沒有發(fā)現(xiàn)，像Github、百度、微博等這些大站，已經(jīng)不再使用普通的a標簽做跳轉(zhuǎn)了。他們大多使用Ajax請求替代了a標簽的默認跳轉(zhuǎn)，然后使用HTML5的新API...
摘要：發(fā)送請求，處理數(shù)據(jù)。在上面這個場景中，這類數(shù)據(jù)的結(jié)構(gòu)可能是最常碰到的。整個過程可以簡化成數(shù)據(jù)的變化引起視圖的變化，和現(xiàn)在很多前端框架數(shù)據(jù)驅(qū)動思想有幾分相似。至此一個對于頁面的抽象出來的數(shù)據(jù)結(jié)構(gòu)雛形基本完成了。 作者：周周（滬江資深Web前端開發(fā)工程師）本文為原創(chuàng)文章，轉(zhuǎn)載請注明作者及出處 前言 近期在小D十周年活動之際，又看到了一個自家H5專題夢工廠生成的頁面。 showImg(htt...
摘要：發(fā)送請求，處理數(shù)據(jù)。在上面這個場景中，這類數(shù)據(jù)的結(jié)構(gòu)可能是最常碰到的。整個過程可以簡化成數(shù)據(jù)的變化引起視圖的變化，和現(xiàn)在很多前端框架數(shù)據(jù)驅(qū)動思想有幾分相似。至此一個對于頁面的抽象出來的數(shù)據(jù)結(jié)構(gòu)雛形基本完成了。 作者：周周（滬江資深Web前端開發(fā)工程師）本文為原創(chuàng)文章，轉(zhuǎn)載請注明作者及出處 前言 近期在小D十周年活動之際，又看到了一個自家H5專題夢工廠生成的頁面。 showImg(htt...
閱讀 568·2021-09-03 00:22
閱讀 1453·2021-08-03 14:03
閱讀 2169·2021-07-25 21:37
閱讀 743·2019-08-30 13:18
閱讀 1951·2019-08-29 16:19
閱讀 2761·2019-08-29 13:22
閱讀 1379·2019-08-29 12:16
閱讀 2650·2019-08-26 12:16
