react表格数据合计实现

实现React表格数据合计的方法

在React中实现表格数据的合计功能，可以通过以下几种方式完成：

使用reduce计算合计值

通过JavaScript的reduce方法遍历数据数组，累加需要合计的字段值。示例代码：

const total = data.reduce((sum, item) => sum + item.amount, 0);

在表格底部添加合计行

在渲染表格时，额外添加一行显示合计值。示例结构：

<table>
  {/* 表头和数据行 */}
  <tfoot>
    <tr>
      <td>合计</td>
      <td>{total}</td>
    </tr>
  </tfoot>
</table>

使用第三方表格库

许多React表格库如antd Table、Material-UI Table等内置了合计功能。以antd为例：

<Table
  columns={columns}
  dataSource={data}
  footer={() => `合计: ${total}`}
/>

动态计算分组合计

如果需要分组合计，可以先对数据进行分组，再分别计算：

const groupTotals = data.reduce((result, item) => {
  const group = item.category;
  result[group] = (result[group] || 0) + item.value;
  return result;
}, {});

格式化合计显示

对合计值进行格式化处理，如添加货币符号或千位分隔符：

const formattedTotal = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY'
}).format(total);

性能优化建议

对于大数据量的表格，建议使用Memoization或useMemo避免重复计算：

const total = useMemo(() => data.reduce((sum, item) => sum + item.value, 0), [data]);