antd table 增加底部合计行统计

本文介绍了如何在Ant Design的Table组件中添加底部合计行统计,包括使用footer属性实现统计,调整数据源以确保每页都有合计行,以及解决滚动条同步问题。此外,还分享了作者的前端开发经历和提供了一份Web前端开发学习资料。
摘要由CSDN通过智能技术生成

}

let

4、model中传过来的合计行数据

model 中 page 要改成默认 10条,因为合计是作为一条数据 push 进去的,且每页都存在。后端实际返回的值是 10, 在页面中改成了 11

在这里插入图片描述

效果图:

在这里插入图片描述

方法2:footer方式实现表格统计。

1、table 表格中加一个 footer 属性,表头 showHeader 隐藏。

2、table 合计行(就是:footer 那行列表),每列的宽度要和上面列表宽度一样。

3、合计行要做判断,如果没有数据,不显示。

let status = pcDataSource && (pcDataSource.length == ‘0’) ? {display: ‘none’} : {display: ‘block’};

最终效果图:

在这里插入图片描述

界面UI代码:

<EditTable

resizable

bordered

loa

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值