關(guān)于表格分頁(yè)緩存數(shù)據(jù)

常規(guī)情況下

在日常工作中，我們翻頁(yè)的時(shí)候都是通過請(qǐng)求來獲取接口數(shù)據(jù)并渲染在表格中，只需要變動(dòng)page，size就可以實(shí)現(xiàn)
如：

getList() {this.$api.getSKUdetail(this.id, {size: this.page_params.size, // 每頁(yè)顯示條數(shù)page: this.page_params.page // 第幾頁(yè)}).then((res) => {if (res.ret) {// 獲取列表數(shù)據(jù)this.page_params.total = res.meta.totalthis.form.skuDetail = res.data}})},

這樣的方便前端，只需要去關(guān)注頁(yè)數(shù)和條碼并回顯就夠了

需求

現(xiàn)在有一個(gè)需求就是，用戶需要通過填寫表格數(shù)據(jù)來提交數(shù)據(jù)，需要提交的數(shù)據(jù)甚至多達(dá)千條，這時(shí)候單純的分頁(yè)就可能力不從心了達(dá)不到需求，所以筆者這里就把表格數(shù)據(jù)緩存下來，同時(shí)離開頁(yè)面時(shí)驗(yàn)證提交保存數(shù)據(jù)

實(shí)現(xiàn)

具體思路是創(chuàng)建一個(gè)數(shù)組對(duì)象，當(dāng)請(qǐng)求未緩存的數(shù)據(jù)時(shí)就調(diào)用getList,拿到數(shù)據(jù)后標(biāo)識(shí)已緩存，發(fā)請(qǐng)求之前驗(yàn)證是否緩存，已緩存就在緩存的二維數(shù)組里面找到并賦值給表格的data

data() {return {cacheSku: [], // 緩存的數(shù)組skus: [], // 表格顯示的列表page_params: {page: 1,size: 5}} } // 分頁(yè)跳轉(zhuǎn) handleCurrentChange(val) {this.page_params.page = val// 是否已經(jīng)緩存const flag = this.cacheSku.filter((item) => {return item.page === val && item.cache})flag.length > 0 ? this.form.skus= flag[0].item : this.getList()/*寫法同上if (flag.length > 0) // 已經(jīng)緩存this.form.skuDetail = flag[0].item} else {// 未緩存this.getList()}*/ }, getList() {this.$api.getSKUdetail(this.id, {size: this.page_params.size, // 每頁(yè)顯示條數(shù)page: this.page_params.page // 第幾頁(yè)}).then((res) => {if (res.ret) {// 獲取列表數(shù)據(jù)this.page_params.total = res.meta.totalthis.form.skuDetail = res.datathis.cacheSku.push({cache: true, // 標(biāo)識(shí)已緩存page: res.meta.current_page, // 標(biāo)識(shí)第幾頁(yè)已緩存item: res.data // 緩存的數(shù)據(jù)})console.log(this.cacheSku)}})},

需要改進(jìn)的地方

當(dāng)用戶有切換頁(yè)數(shù)size的需求時(shí)，筆者這里的操作是清空緩存并重新開始緩存 ，這里還不知道怎么改進(jìn)，大家有什么好的想法可以在下面留言 ———前端菜鳥一枚（比心）

總結(jié)

以上是生活随笔為你收集整理的关于表格分页缓存数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。