Element輸入框帶歷史查詢記錄的實(shí)現(xiàn)示例
需求描述
頁面的查詢框增加一下顯示歷史查找記錄

實(shí)現(xiàn)及踩坑記錄
使用Element帶輸入建議的輸入框來實(shí)現(xiàn)此需求。用法詳見官網(wǎng)
1. 坑1:不能直接在querySearch里返回?cái)?shù)組,一定要調(diào)用回調(diào)函數(shù)cb來處理數(shù)據(jù)
看了一下例子,建議列表應(yīng)該是個(gè)數(shù)組,然后我就在querySearch里直接返回了一個(gè)數(shù)組:
querySearch(queryString, cb) {
return JSON.parse(localStorage.getItem('srcOrderNoArr'))
},
但是回到網(wǎng)頁上卻發(fā)現(xiàn)列表數(shù)據(jù)加載不出來
正確姿勢(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屬性值來渲染的,所以數(shù)組內(nèi)的對(duì)象一定要有value鍵值對(duì)。比如說是這樣的:
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查詢記錄的localStorage
if(localStorage.getItem(text).indexOf(value) > -1 ) { // 判斷是否已有此條查詢記錄,若已存在,則不需再存儲(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))
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
elementui源碼學(xué)習(xí)仿寫el-link示例詳解
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)仿寫el-link示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Vue實(shí)現(xiàn)鼠標(biāo)懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件詳解
在所做的Vue項(xiàng)目中,有時(shí)候需要在鼠標(biāo)移動(dòng)文字框的時(shí)候顯示一些詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)鼠標(biāo)懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件的相關(guān)資料,需要的朋友可以參考下2022-11-11
關(guān)于Vue實(shí)例創(chuàng)建的整體流程
這篇文章主要介紹了關(guān)于Vue實(shí)例創(chuàng)建的整體流程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決
這篇文章主要介紹了vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08

