antd系列（一）： table中总结栏的使用

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（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;
});

// 渲染