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 {…},来实现对应样式的更改。