antd table Summary总结栏置顶

antd4.x table表格合计行在表头下方展示(合计行置顶,展示在顶部)

实现步骤:

1、首先给table添加sticky属性设置粘性头部

    <Table
      // 1、添加sticky属性
      sticky  
      columns={
    
    columns}
      ...
      summary={
    
    pageData => {
    
    
       ...
      }}
    />

2、通过修改table中对应的css实现合计行置顶

@import '~antd/dist/antd.css';

  tfoot th,
  tfoot td {
    
    
    background: #fafafa;
  }
  [data-theme="dark"] tfoot th,
  [data-theme="dark"] tfoot td {
    
    
    background: #1d1d1d;
  }
  
  // 2、搭配sticky 实现合计行置于表头下方 
 .ant-table-summary {
    
    
    display: table-header-group;
 }

实现效果:
合计行置顶

详细的细节更改,根据自己的项目需求,可通过css样式调整实现。

如果使用less,修改antd 中table样式不生效,可使用深度作用选择器 :global {…},来实现对应样式的更改。

链接: antd 4.x table通过 summary 设置合计行(总结栏).

猜你喜欢

转载自blog.csdn.net/weixin_42146585/article/details/123795280