antd vue table分页问题

一、使用antd对table分页时有两种方式

1.直接获取全量数据使用框架默认的分页

缺点:数据量过大会将页面卡死。

优点:前端方便不需要做过多逻辑处理即开即用。

问题:这个方式每次切换数据源的时候table不会自动回到第一页,当你想控制切换完数据切换到第一页时你会肯定会想到要先设置pagination里面的current=1或者设置:current=1,但是这个时候你会发现分页就切换不了了,我在网上看到很多人到了这一步就不了了之了。

微信图片_20220324121404.jpg

还缺了关键的代码,设置onchange事件来控制分页器,代码如下:

//设置onchange事件来控制分页器
pagination: {
    current: 1,
    onChange:(page,pageSize)=>{
        this.pagination.current = page
        console.log(page,pageSize)
    },
}
//每次切换完数据源之后重新给current赋值
this.pagination.curren = 1

2.通过后端接口分页切换数据时传入page及pageSize

具体代码及示例请直接查看antd vue官网:
https://www.antdv.com/components/table-cn/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值