网页设计与网站建设教材,网站建设捌金手指花总二九,和各大网站做视频的工作总结,个人网站建设作用需求描述页面的查询框增加一下显示历史查找记录实现及踩坑记录使用Element带输入建议的输入框来实现此需求。用法详见官网1. 坑1#xff1a;不能直接在querySearch里返回数组#xff0c;一定要调用回调函数cb来处理数据看了一下例子#xff0c;建议列表应该是个数组#xf…需求描述页面的查询框增加一下显示历史查找记录实现及踩坑记录使用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 thislet noArr [], // 订单号历史记录数组text , value switch (type) {case srcOrderNo:text srcOrderNoArrvalue self.srcOrderNobreakcase jobOrderNo:text jobOrderNoArrvalue self.jobOrderNobreakcase cntNo:text cntNoArrvalue self.cntNobreakdefault:break}noArr.push({value: value, type: type})if(JSON.parse(localStorage.getItem(text))) { // 判断是否已有xxx查询记录的localStorageif(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))}}}参考
