如何使用Ant Design Table计算同名行的amount列值总和

1. 用reduce处理原始数据，分组求和 #

先通过reduce对原始数据按name分组，累加对应amount值，得到聚合后的数据集：

// 示例原始数据
const rawData = [
  { id: 1, name: '商品A', amount: 10, otherField: 'xxx' },
  { id: 2, name: '商品B', amount: 20, otherField: 'yyy' },
  { id: 3, name: '商品A', amount: 15, otherField: 'zzz' },
  { id: 4, name: '商品C', amount: 5, otherField: 'aaa' },
  { id: 5, name: '商品B', amount: 25, otherField: 'bbb' },
];

// 分组求和逻辑
const aggregatedData = Object.values(
  rawData.reduce((acc, item) => {
    // 若当前name未在分组中，初始化条目并赋值初始amount
    if (!acc[item.name]) {
      acc[item.name] = { ...item, amount: item.amount };
    } else {
      // 已存在则累加amount
      acc[item.name].amount += item.amount;
    }
    return acc;
  }, {})
);

2. 将聚合后的数据传入Ant Design Table #

把处理好的aggregatedData作为数据源传入Table，配置对应列即可：

import { Table } from 'antd';

// 列配置
const columns = [
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '总金额', dataIndex: 'amount', key: 'amount' },
  { title: '其他字段', dataIndex: 'otherField', key: 'otherField' },
];

const SumTable = () => {
  return (
    <Table
      dataSource={aggregatedData}
      columns={columns}
      rowKey="name" // 因已分组，name可作为唯一标识
    />
  );
};

export default SumTable;

注意事项 #

• 如果同一name对应的其他字段需要特殊处理（比如合并、取第一条值），可在reduce的逻辑中调整，例如把otherField拼接成字符串：acc[item.name].otherField += ',' + item.otherField
• 若需要保留原始行同时展示合计行，可使用AntD Table的summary属性实现底部合计，但如果是直接合并相同name的行，上述分组方法更直接

内容的提问来源于stack exchange，提问作者Hind