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;
});

// 渲染

猜你喜欢

转载自blog.csdn.net/James_xyf/article/details/120122006