antd - react table表格需要展示合计行

antd - react table表格需要展示合计行,第1张

antd UI框架中table表格本身没有合计行功能需要自己实现,

以下是实现的过程。

1.在设置column时添加序号列,序号为0时显示‘合计’

2.在传data时注意处理下后端返回的total数据

3.这个时候表格显示上会出新问题,因为合计占了一行,导致下面数据展示少了一行,所以需要让pagesize+1

4.因为pageSize在传值的时候多加了1,这样传给后台就又不对了,所以在发送请求之前再重新令pageSize - 1,这样问题就解决了。

新接手的一个项目 是基于ant-design-vue admin的开发,当需求要实现类似elementUI的合计行效果时,发现提供的API不支持,然后写了这个组件,也当练基础了

思路要点有

另外,在实现过程中发现:showHeader="false"这个属性在s-table中不起作用,查看源码发现是props传递的时候出了问题

将s-table组件 render方法中

改为

后解决问题


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11882459.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存