【分页常见问题】

本文介绍如何使用Vue的el-cow方法调整分页栏位置,配合响应式数据处理,实现实时分页效果。通过配置findPage方法,配合动态绑定的总条数,确保表格数据随页面切换更新。同时,关注了如何保持页码状态的持久化问题。
摘要由CSDN通过智能技术生成

在这里插入图片描述

如何用el-cow方法固定位置
例如下图,想让分页栏偏右一些,根据大小给定比例,

  • List item
    如果给它8份的大小,那么倩倩就得让它右移16份(8+16=24)
    在这里插入图片描述
    在这里插入图片描述
  • 2、
    在这里插入图片描述
    在这里插入图片描述

如何配置分页方法呢?

在这里插入图片描述
在这里插入图片描述
F12查看数据,就可以看到数据已经可以拿到了

如何从让后台的数据跟着转变

在这里插入图片描述
由于总条数不是固定的,所以这里需要将总条数绑定给vue实例,默认给0条数据
div
在这里插入图片描述
return
在这里插入图片描述
methods
在这里插入图片描述
点击后进行分页:传递两个参数pageNow和pageSize
当前页绑定size这个值,current-page绑定当前页
在这里插入图片描述
return,每页为四页,默认当前页为1
在这里插入图片描述
methods
1.给findPage分页绑定此事件
在这里插入图片描述
2.
在这里插入图片描述
3.因为是上方已经写好了默认值,所以这里只需要写默认值的参数即可
在这里插入图片描述
分页功能就完成了
现在完成分页后表格数据跟着改变
在这里插入图片描述
当点击后发生变换后 让设好的页码等不还原回去
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

礼礼。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值