请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

el-pagination 组件数据持久化,缓存当前页面数据

2023-07-13

vue 文件演示:


    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="cur_page"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="recordsTotal">
    </el-pagination>

一般在 handleCurrentChange ,即 @current-change 事件中缓存当前的页面页码数据

缓存的方法有:window.localStoragesessionStorage

提示: 如果你只想将数据保存在当前会话中,可以使用 sessionStorage 属性, 该数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

所以笔者个人推荐使用 sessionStorage 来缓存页码数据

然后怎么获取缓存的数据,然后在赋予缓存的页码数据的方法:(需要提醒的是缓存的数据是字符串,所以要转换为数字类型的数据,否则 el-pagination 组件会报错的)

如下举例:数据转换为数字类型的

this.pageNum = parseInt(sessionStorage.getItem("pagenum"))

在发送 api 接口前设置该操作,就可以在刷新页面后,停留当前页码的页面


参考链接

1. Window localStorage 属性

2. Window sessionStorage 属性

3. element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部