每天对自己多问几个为什么,总是有着想象不到的收获。 一个菜鸟小白的成长之路(copyer)
参数 | 说明 | 类型 |
---|---|---|
summary | 总结栏 | (currentData) => ReactNode |
总结栏的两种情况
- 对表格每页的数据进行总结
- 对表格的整体数据进行总结
基础数据的搭建
// table 的 columns
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'num1',
dataIndex: 'num1',
},
{
title: 'num2',
dataIndex: 'num2',
},
{
title: 'num3',
dataIndex: 'num3',
},
{
title: 'num4',
dataIndex: 'num4',
}
];
// table 的 data
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
num1: 12,
num2: 23,
num3: 23,
num4: 45
},
{
key: '2',
name: 'james',
age: 32,
num1: 12,
num2: 23,
num3: 23,
num4: 45
},
{
key: '3',
name: 'kobe',
age: 32,
num1: 12,
num2: 23,
num3: 23,
num4: 45
},
{
key: '4',
name: 'curry',
age: 32,
num1: 12,
num2: 23,
num3: 23,
num4: 45
},
{
key: '5',
name: 'davs',
age: 32,
num1: 12,
num2: 23,
num3: 23,
num4: 45
},
];
// table 组件的使用
<Table columns={
columns} dataSource={
data} bordered pagination={
pagination}></table>
对表格每页的数据进行总结
<Table columns={
columns}
dataSource={
data}
bordered
pagination
// 这里的pageData就是每页的数据
summary={
pageData => {
let num11 = 0, num22 = 0, num33 = 0, num44 = 0;
// 循环每页的数据,计算出每列的总和
pageData.forEach(({
num1, num2, num3, num4 }) => {
num11 += num1;
num22 += num2;
num33 += num3;
num44 += num4;
});
// 使用 Table.Summary.Row 来进行渲染
return (
<>
<Table.Summary.Row>
<Table.Summary.Cell colSpan={
2}>总结</Table.Summary.Cell>
<Table.Summary.Cell>
{
num11}
</Table.Summary.Cell>
<Table.Summary.Cell>
{
num22}
</Table.Summary.Cell>
<Table.Summary.Cell>
{
num33}
</Table.Summary.Cell>
<Table.Summary.Cell>
{
num44}
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>
对表格的整体数据进行总结
思路基本跟上面的一致,只不过就是计算出总和,然后进行渲染而已
let num11 = 0, num22 = 0, num33 = 0, num44 = 0;
// 这里就是循环整个数组,然后计算出结果
data.forEach(({
num1, num2, num3, num4 }) => {
num11 += num1;
num22 += num2;
num33 += num3;
num44 += num4;
});
// 渲染