【React工作记录八十四】React+Hook+ts+antDesign实现table增加一个合计功能

最新推荐文章于 2025-12-25 08:56:57 发布

原创最新推荐文章于 2025-12-25 08:56:57 发布 · 398 阅读

收录于

当前文章被以下社区和专栏收录：

前端项目工作实战专栏收录该内容

146 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文记录了使用React、Hook和AntDesign库，结合typescript，实现表格的合计功能。通过查看官方API，利用Table.Summary和Column的fixed属性完成总计栏的设置。案例展示并总结了整个实现过程。

前言

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

实现效果

在这里插入图片描述

思路

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

案例

const App: React.FC = () => (
  <>
    <Table
      columns={columns}
      dataSource={data}
      pagination={false}
      bordered
      summary={pageData => {
        let totalBorrow = 0;
        let totalRepayment = 0;

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

标签