ReactAntd(三十一) React-高级表格总结

把每个列的值合并值

• 代码如下

import React from 'react'
import { Table, Typography, ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'

function useTable4() {
  const { Text } = Typography
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '收入',
      dataIndex: 'borrow',
    },
    {
      title: '支出',
      dataIndex: 'repayment',
    },
  ]

  const data = [
    {
      key: '1',
      name: 'John Brown',
      borrow: 10,
      repayment: 33,
    },
    {
      key: '2',
      name: 'Jim Green',
      borrow: 100,
      repayment: 0,
    },
    {
      key: '3',
      name: 'Joe Black',
      borrow: 10,
      repayment: 10,
    },
    {
      key: '4',
      name: 'Jim Red',
      borrow: 75,
      repayment: 45,
    },
  ]

  return (
    <ConfigProvider locale={zhCN}>
      <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>工资</Table.Summary.Cell>
                <Table.Summary.Cell>
                  <Text type="danger">{totalBorrow}</Text>
                </Table.Summary.Cell>
                <Table.Summary.Cell>
                  <Text>{totalRepayment}</Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell>总计</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={2}>
                  <Text type="danger">{totalBorrow - totalRepayment}</Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          )
        }}
      />
    </ConfigProvider>
  )
}

export default useTable4