前言
今天继续平常的一个任务开发 今天需要给我们的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 += borrow;
totalRepayment += repayment;
});
return (
<>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text type="danger">{totalBorrow}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={2}>
<Text>{totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
<Table.Summary.Cell index={1} colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>实现代码
<Table dataSource={menuData.list} columns={columns} pagination={false}
summary={data => {
let totalCount = 0;
return (
<>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
</Table.Summary.Cell>
<Table.Summary.Cell index={2}>
</Table.Summary.Cell>
<Table.Summary.Cell index={3}>
</Table.Summary.Cell>
<Table.Summary.Cell index={4}>
<span>{total}</span>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>总结
这样就完美完成了 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣
