antd table 增加底部合计行统计
2021-06-16 本文已影响0人
嗳湫
方法1:把合计行插入到数组中。
方法2:footer方式实现表格统计。
通过百度参考结合自己项目,做了变化。具体如下:
方法1:把合计行插入到数组中。
1.列表数据:
在这里插入图片描述
2、 合计行的数据合并到列表中(要做判断,如果没有数据,不显示)
在这里插入图片描述
3、table模块
**加粗样式**
4、page 传参
//table与pagination组件之间的联动
//因为table表格每页显示的数据被pagenation分页默认的每页显示数pageSize所限制,默认为10,为了让合计行显示到页面上,需+1。
const _pageSize = totalList && totalList.length == 0 ? pcPagination.pageSize : pcPagination.pageSize + 1;
//table表格需要获取的总数据,为了让table将后台获取数据和新增合计行数据全部显示出来,需重新计算总数。
const _total = totalList && totalList.length == 0 ? pcPagination.total : pcPagination.total + parseInt(pcPagination.total/pcPagination.pageSize) + 1
//分页设置
const paginationDefault = {
...pcPagination,
showSizeChanger: true,
current: pcPagination.current,
total: _total,
pageSize: _pageSize,
//因为与后台规定每页获取的数据为10,而前端自定义追加了一条合计行,这导致当前table的每页数据为11条,所以需要手动将分页数据+1
//若是想显示为['10', '20', '30', '40'],则修改每页获取数据为9即可。
pageSizeOptions: ['11', '21', '31', '41','51','101'],
//此处显示的是从后台获取的总数据数,合计行不在其中。
showTotal: () => `共${pcPagination.total}条记录`
}
let
4、model中传过来的合计行数据
model 中 page 要改成默认 10条,因为合计是作为一条数据 push 进去的,且每页都存在。后端实际返回的值是 10, 在页面中改成了 11
在这里插入图片描述
效果图:
[图片上传失败...(image-621d8c-1625281508800)]
方法2:footer方式实现表格统计。
1、table 表格中加一个 footer 属性,表头 showHeader 隐藏。
2、table 合计行(就是:footer 那行列表),每列的宽度要和上面列表宽度一样。
3、合计行要做判断,如果没有数据,不显示。
let status = pcDataSource && (pcDataSource.length == '0') ? {display: 'none'} : {display: 'block'};
最终效果图:
[图片上传失败...(image-850c96-1625281508800)]
界面UI代码:
<Fragment>
<EditTable
resizable
bordered
loading={loading}
rowKey="penetrationId"
columns={columns}
dataSource={pcDataSource}
pagination={pcPagination}
rowSelection={{
selectedRowKeys: selectedRows.map(n => n.penetrationId),
onChange:onRowSelectChange,
}}
onChange={page => onChange(page)}
scroll={{ x: 3400 ,y:450 }}
footer={() => {
return (
<EditTable
bordered={false}
showHeader={false} // table 的 columns 头部隐藏
columns={columns}
dataSource={footerDatasSource}
rowKey={record => Math.random()}
pagination={false}
scroll={{ x:3400 ,y:80 }}
style={status}
/>
)
}}
/>
</Fragment>
遇到问题:
1.数据列过多时候表体滚动条、和合计行滚动条不能同时滚动。
componentDidMount() {
let warp = document.getElementsByClassName("ant-table-body")[0];
// 添加滚动监听
warp.addEventListener('scroll', this.handleScroll);
}
//监听滚动事件
handleScroll = ()=>{
let warp = document.getElementsByClassName("ant-table-body")[0];
let wrapBottom = document.getElementsByClassName('ant-table-body')[1]
warp.addEventListener("scroll",() => {
wrapBottom.scrollLeft = warp.scrollLeft;
},true)
}
// 组件将要卸载,取消监听window滚动事件
componentWillUnmount(){
window.removeEventListener('scroll', this.handleScroll);
}
滚动效果同步:
在这里插入图片描述
隐藏合计行滚动条,并对其表格:
.ant-table-footer .ant-table-body{
overflow: hidden !important;
}
.ant-table-footer{
padding-left: 46px;
}