antd table 增加底部合计行统计

方法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;
}