在表格最后加一行合计，计算列表中数据的和

如图所示，怎么在表格最后加一行合计，计算列表中数据的和？

表格代码如下

             <Modal title={`周转量明细`} visible={visible} width={800} footer={null} onCancel={onCancel} >
                <div id='alert-table' ref={alertTableRef} style={{ paddingTop: 8 }}>
                    <Table bordered dataSource={detail}  pagination={false}>
                        <Table.Column title='时间' dataIndex='yearMonth' align='center' />
                        <Table.Column title='货物吞吐量(万吨)' dataIndex='transport' align='center' />
                    </Table>
                </div>
            </Modal>

表格数据来源于后端接口

希望最终的效果是

<script>
        var data = [{
            name: 26.3
        }, {
            name: 26.3
        }, {
            name: 26.3
        }, {
            name: 26.3
        }, {
            name: 26.3
        }, {
            name: 26.3
        }]
        var val = 0;
        for (let i = 0; i < data.length; i++) {
            val += Number(data[i].name)
        }
        console.log(val)//合计
    </script>
大致是这意思，接口里的值加一下就可以了

antd表格列 https://ant.design/components/table-cn/#components-table-demo-summary

import { Table, Typography } from 'antd';

const { Text } = Typography;

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Borrow',
    dataIndex: 'borrow',
  },
  {
    title: 'Repayment',
    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,
  },
];

const fixedColumns = [
  {
    title: 'Name',
    dataIndex: 'name',
    fixed: true,
    width: 100,
  },
  {
    title: 'Description',
    dataIndex: 'description',
  },
];

const fixedData = [];
for (let i = 0; i < 20; i += 1) {
  fixedData.push({
    key: i,
    name: ['Light', 'Bamboo', 'Little'][i % 3],
    description: 'Everything that has a beginning, has an end.',
  });
}

ReactDOM.render(
  <>
    <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>Total</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>Balance</Table.Summary.Cell>
              <Table.Summary.Cell colSpan={2}>
                <Text type="danger">{totalBorrow - totalRepayment}</Text>
              </Table.Summary.Cell>
            </Table.Summary.Row>
          </>
        );
      }}
    />

    <br />

    <Table
      columns={fixedColumns}
      dataSource={fixedData}
      pagination={false}
      scroll={{ x: 2000, y: 500 }}
      bordered
      summary={() => (
        <Table.Summary fixed>
          <Table.Summary.Row>
            <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
            <Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
          </Table.Summary.Row>
        </Table.Summary>
      )}
    />
  </>,
  mountNode,
);

summary这个attr应该可以解决题主的问题

合计正常都是后端算啊, 前端能统计的数据就只有后端返回的, 如果是分页的数据前端就没办法算...建议让后端返回, 格式如下

{
    "data": {
        "list": [
            {"date": "", "num": 1},
            {"date": "", "num": 2},
        ],
        "sum": {
            "num": 3
        }
    }
}

先获取最后一列 保存在变量中
然后再获取里面的数据
再用循环相加求和
再返回合计后面的标签里