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 (
      <>
        <Table.Summary.Row>
          <Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
          <Table.Summary.Cell index={1}>
            <Text type="danger">{totalBorrow}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell index={2}>
            <Text>{totalRepayment}</Text>
          </Table.Summary.Cell>
        </Table.Summary.Row>
        <Table.Summary.Row>
          <Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
          <Table.Summary.Cell index={1} colSpan={2}>
            <Text type="danger">{totalBorrow - totalRepayment}</Text>
          </Table.Summary.Cell>
        </Table.Summary.Row>
      </>
    );
  }}
/>

```

实现代码

<Table dataSource={menuData.list} columns={columns} pagination={false} summary={data => { let totalCount = 0; return ( <> <Table.Summary.Row> <Table.Summary.Cell index={0}>合计</Table.Summary.Cell> <Table.Summary.Cell index={1}> </Table.Summary.Cell> <Table.Summary.Cell index={2}> </Table.Summary.Cell> <Table.Summary.Cell index={3}> </Table.Summary.Cell> <Table.Summary.Cell index={4}> <span>{total}</span> </Table.Summary.Cell> </Table.Summary.Row> </> ); }} />

总结

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