关于表格分页缓存数据

关于表格分页缓存数据

常规情况下

在日常工作中，我们翻页的时候都是通过请求来获取接口数据并渲染在表格中，只需要变动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.total
            this.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.total
            this.form.skuDetail = res.data
            this.cacheSku.push({
              cache: true, // 标识已缓存
              page: res.meta.current_page, // 标识第几页已缓存
              item: res.data // 缓存的数据
            })
            console.log(this.cacheSku)
          }
        })
    },

需要改进的地方

当用户有切换页数size的需求时，笔者这里的操作是清空缓存并重新开始缓存 ，这里还不知道怎么改进，大家有什么好的想法可以在下面留言 ———前端菜鸟一枚（比心）