表格分页刷新页码不变(最简单的方法)

19 篇文章 0 订阅

耗时好长时间,终于给弄好了~~

1.首先要获取首页数据,代码如下:

在获取page的时候本地如果有的话,就从本地中获取,本地如果没有,就默认第一页,可以实现刷新页码不变的情况。

 // 获取企业管理情况数据
     getOrgList(){
        let page = localStorage.getItem('page') || 1
        getOrgManagerList({
        page: page,
        pageSize: 1,
      }).then((res) => {
        // console.log(res);
        this.manage.tableData = res.data.list;
        this.manage.page = res.data.page;
        this.manage.pageSize = res.data.pageSize;
        this.manage.total = res.data.total;
      });
     },

2.然后,在mounted或created中,调用1中的方法

 mounted() {
     this.getOrgList()
  }

3.在分页组件事件@current-change事件中,每次页面改变,触发后台请求中,参数page的改变。代码如下:

 handleCurrentChange(page) {
      localStorage.setItem('page',page)
      // console.log(page);
      getOrgManagerList({
        page: localStorage.getItem('page') || 1,
        pageSize: 1,
      }).then((res) => {
        // console.log(res);
        this.manage.tableData = res.data.list;
        this.manage.page = res.data.page;
        this.manage.pageSize = res.data.pageSize;
        this.manage.total = res.data.total;
      });
    },
  }

4.分页组件的代码如下:

 <el-pagination
            :current-page="manage.page"
            :page-size="manage.pageSize"
            :total="manage.total"
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            v-if="manage.total != 0"
 />

如有错误,请多多指出~

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值