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

最新推荐文章于 2023-10-12 10:31:50 发布

前端大歌谣

最新推荐文章于 2023-10-12 10:31:50 发布

阅读量298

点赞数

分类专栏：前端项目工作实战文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/geyaoisnice/article/details/129405474

版权

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

143 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

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

摘要由CSDN通过智能技术生成

前言

今天继续平常的一个任务开发 今天需要给我们的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, re

了解本专栏