Antdesign 表格下面添加汇总的UI

最新推荐文章于 2024-09-25 15:46:58 发布

동경

最新推荐文章于 2024-09-25 15:46:58 发布

阅读量523

点赞数

分类专栏： Js 文章标签： html

本文链接：https://blog.csdn.net/weixin_43814775/article/details/120263805

版权

Js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

博主分享了在使用AntDesign时如何实现表格的汇总功能。原先误以为AntDesign未提供此功能，但后来发现并正确使用了Table组件的summary属性，创建了一个固定的表格汇总行。示例代码中展示了如何添加和定制汇总内容。

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

Antdesign 表格下面添加汇总的组件
在这里插入图片描述

首先，我是之前傻傻的用原生的div来写汇总这一部分的！
然后边写边怨恨着为什么Ant Design 为什么不提供这样的组件！

结果是我太年轻了！是我没有好好看API的结果！

   <Table
      columns={fixedColumns}
      dataSource={fixedData}
      pagination={false}
      scroll={{ x: 2000, y: 500 }}
      bordered
      summary={() => (
        <Table.Summary fixed>
          <Table.Summary.Row>
            <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
            <Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
          </Table.Summary.Row>
        </Table.Summary>
      )}
    />