关于表格分页缓存数据

常规情况下

在日常工作中，我们翻页的时候都是通过请求来获取接口数据并渲染在表格中，只需要变动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的需求时，笔者这里的操作是清空缓存并重新开始缓存，这里还不知道怎么改进，大家有什么好的想法可以在下面留言 ———前端菜鸟一枚（比心）

关于表格分页缓存数据相关推荐

java实现layui静态表格分页,layui——数据表格分页实例
layui实现数据表格table分页功能,异步加载,表格渲染.总体流程:layui的数据表格设置分页参数开启可以从请求中看到如下图,所以我们需要在后端控制器接收分页数据page和limit进行操作,下 ...
Layui数据表格分页通过两种方法实现
SSM框架+Layui框架实现数据表格分页效果图如下所示: 具体实现方法: 方法一:(基于前台进行分页) 实现思路:主要是后台将全部数据返回到前台,之后前台通过Layui的parseData函数来实现 ...
十行代码将Redis缓存数据进行分页提取与展示
预览准备数据从以前的项目中提取一些数据直接导入MySQL,原先数据库为sqlite3,先将数据转为xls文件格式. 然后使用MySQL可视化工具Navicat for MySQL新建一个数据库,新 ...
layui数据表格分页无法正常显示
layui数据表格分页无法正常显示应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从ur ...
Thinkphp+layui数据表格实现表格分页
项目场景:Thinkphp+layui数据表格实现表格分页提示:thinkphp+layui数据表格分页,需要服务器端配合.之前在百度上一通乱搜也没找到解决方案. 问题描述提示:这里描述项目中遇到 ...
动态树+数据表格+分页
目录 1. 后台数据 2. 动态生成NavMenu导航菜单(只支持2级菜单 2.1 结构 2.2 vue+element的el-menu组件实现路由跳转及当前项的设置 2.3 数据表格 ...
vue09动态树+数据表格+分页模糊查
14天阅读挑战赛努力是为了不平庸~ 目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单 ...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能一.部分技术选型二.项目结构三.功能需求和效果展示四.关键代码 4.1页 ...
09 动态树+数据表格+分页+增删改
前言这篇文章是继上一篇文章的增删改查功能的实现一.动态树效果图我们将在上一次课中的LeftAside.vue中完成动态树的实现主要代码在Element官网 NavMenu 导航菜单中的侧栏 ...

关于表格分页缓存数据

关于表格分页缓存数据

常规情况下

需求

实现

需要改进的地方

关于表格分页缓存数据相关推荐

最新文章

热门文章