antd 表格添加合计行

ps:好坑,antd竟然没有表格合计行的功能,只好自己研究一下,总结了一个还不错的方案,下面看代码

1、添加pageSizeOptions

2、查询分页数据的时候判断pagesize

 在这里,我们希望table当前页展示11条,其中一条是合计,所以我们只要问后端要10条table数据就行了

3、塞入合计行数据

合计行数据我们后端是分开给我的,并没有把合计行数据放到table数据里去

4、响应结果中处理pagesize 

如果pagesize是10,那么给它+1,因为我们table实际上要展示11条数据

5、 重新计算total

 假设后端返回的total是99。
对于前端来说:你的pagesize是11,那么99条数据计算出来的总页数是9
对于后端来说,你的pagesize是10,那么99条数据计算出来的总页数是10
为什么会出现这种情况呢,那是因为你前端在第一页多塞了一个合计行,前端的pagesize是11,前端以为每一页都有合计行,这就导致了'数据丢失',这个时候我们就重新计算total,告诉前端,我每一页都有一个合计行,然后根据这种结果来计算总页数,这个时候数据就不会丢失了

新的total计算公式:total = 后端返回的total + (后端返回的total/(pagesize-1))

 6、修改showTotal显示

这时候显示的total是假的,并不是数据库中的total,这时候我们应该把后端返回的total显示到页面上

补充:还记得上面我们设置的pageSizeOptions吧?测试说太丑了

行,没关系,我们改,只需要在pagination里添加一个东西就好了,如下图

 

好的,大功告成,接下来看成果

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值