React+Hook+ts+antDesign实现table增加一个合计功能

前言

今天继续平常的一个任务开发 今天需要给我们的ant design table增加一个合计的一个功能

实现效果

思路

首先 我们遇到问题的思路就是要看官方api 通过 summary 设置总结栏。使用 Table.Summary.Cell 同步 Column 的固定状态。你可以通过配置 Table.Summary 的 fixed 属性使其固定(4.16.0 支持)。

案例

``` const App: React.FC = () => ( <>

pageData.forEach(({ borrow, repayment }) => {
      totalBorrow += borrow;
      totalRepayment += repayment;
    });

    return (
      <>
        
          Total
          
            {totalBorrow}
          
          
            {totalRepayment}
          
        
        
          Balance
          
            {totalBorrow - totalRepayment}
          
        
      
    );
  }}
/>

```

实现代码

{ let totalCount = 0; return ( <> 合计 {total} ); }} />

总结

这样就完美完成了 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣