關于表格分頁緩存數據

常規情況下

在日常工作中，我們翻頁的時候都是通過請求來獲取接口數據并渲染在表格中，只需要變動page，size就可以實現
如：

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

這樣的方便前端，只需要去關注頁數和條碼并回顯就夠了

需求

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

實現

具體思路是創建一個數組對象，當請求未緩存的數據時就調用getList,拿到數據后標識已緩存，發請求之前驗證是否緩存，已緩存就在緩存的二維數組里面找到并賦值給表格的data

data() {return {cacheSku: [], // 緩存的數組skus: [], // 表格顯示的列表page_params: {page: 1,size: 5}} } // 分頁跳轉 handleCurrentChange(val) {this.page_params.page = val// 是否已經緩存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) // 已經緩存this.form.skuDetail = flag[0].item} else {// 未緩存this.getList()}*/ }, getList() {this.$api.getSKUdetail(this.id, {size: this.page_params.size, // 每頁顯示條數page: this.page_params.page // 第幾頁}).then((res) => {if (res.ret) {// 獲取列表數據this.page_params.total = res.meta.totalthis.form.skuDetail = res.datathis.cacheSku.push({cache: true, // 標識已緩存page: res.meta.current_page, // 標識第幾頁已緩存item: res.data // 緩存的數據})console.log(this.cacheSku)}})},

需要改進的地方

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。