antd table 增加底部合计行统计

灰太狼 2022-10-07 04:58 2026阅读 0赞

方法1：把合计行插入到数组中。  
方法2：footer方式实现表格统计。

通过百度参考结合自己项目，做了变化。具体如下：  
**方法1：把合计行插入到数组中。**

1.列表数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
2､ 合计行的数据合并到列表中（要做判断，如果没有数据，不显示）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
3､table模块  
![\*\*加粗样式\*\*][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]  
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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]

**方法2：footer方式实现表格统计。**  
1､table 表格中加一个 footer 属性，表头 showHeader 隐藏。  
2、table 合计行（就是：footer 那行列表），每列的宽度要和上面列表宽度一样。  
3､合计行要做判断，如果没有数据，不显示。

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

最终效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 5]

界面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);
    }

滚动效果同步：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 6]  
隐藏合计行滚动条,并对其表格：

.ant-table-footer .ant-table-body{
      overflow: hidden !important;
    } 
    .ant-table-footer{
      padding-left: 46px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221005/9b132486c4334417983bced0eabec6f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/fb274093d22f4245ae86224f323455fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/0c8cd1463d684dfd81c71d076da01123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/6ccb98938c7441aab541aed3bc72525c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/c67cef04b84648f6adf37d29054cfc6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/0a1e5717cb8a4b678533733ba59668dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/2a227f01b9e2414cbe212f9e4f19f361.png