React Table 添加底部合计行：实现 CO2/kg 列总计-html教程-PHP中文网

React Table 添加底部合计行：实现 CO2/kg 列总计

碧海醫心

发布： 2025-10-08 10:40:18

原创

339人浏览过

react table 添加底部合计行：实现 co2/kg 列总计

本文将详细介绍如何在 React Table 组件中添加底部合计行，以显示特定列的总计值。通过结合 Array.reduce 方法，可以轻松实现这一功能，为用户提供更全面的数据概览。

在 React 应用中，表格是一种常见的数据展示形式。有时，我们需要在表格底部添加一行，用于显示特定列的总计值，例如 CO2/kg 列的总和。以下是一种实现方法：

1. 计算总计值

首先，使用 Array.reduce 方法计算出 CO2/kg 列的总和。假设你的数据存储在名为 description 的数组中，每个元素都有一个 carbon 属性，代表 CO2/kg 值。

const totalCarbon = description.reduce((acc, item) => {
  return acc + item.carbon;
}, 0);

登录后复制

这段代码将遍历 description 数组，并将每个元素的 carbon 值累加到 acc 变量中。初始值为 0。最终，totalCarbon 变量将包含 CO2/kg 列的总和。

2. 添加底部合计行

接下来，需要在表格的 <tbody> 中添加一行，用于显示总计值。为了使总计值显示在 CO2/kg 列的下方，需要在该行中添加适当数量的空单元格。

设计师AI工具箱

最懂设计师的效率提升平台，实现高效设计出图和智能改图，室内设计，毛坯渲染，旧房改造，软装设计

124

查看详情

<tbody>
  {descrition.map((descrition) => (
    <tr key={descrition.id}>
      <td>{descrition.food}</td>
      <td>{descrition.quantity}</td>
      <td>{descrition.uom}</td>
      <td>{descrition.density}</td>
      <td>{descrition.carbon}</td>
      <td>{carbonCategory(descrition.carbon)}</td>
      <td>{carbonCategory(descrition.carbon)}</td>
    </tr>
  ))}
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>{totalCarbon}</td>
    <td></td>
    <td></td>
  </tr>
</tbody>

登录后复制

在上述代码中，我们添加了一个新的 <tr> 元素，其中包含了若干个 <td> 元素。前四个 <td> 元素为空，用于将总计值定位到 CO2/kg 列的下方。第五个 <td> 元素显示 totalCarbon 变量的值，即 CO2/kg 列的总和。

完整代码示例

import React from 'react';

function MyTable({ description }) {
  const totalCarbon = description.reduce((acc, item) => {
    return acc + item.carbon;
  }, 0);

  const carbonCategory = (carbonValue) => {
    // 根据 carbonValue 返回相应的类别
    return "Category"; // 示例
  };

  return (
    <table className="table mt-5 text-center">
      <thead>
        <tr>
          <th>Name</th>
          <th>Quantity</th>
          <th>UOM</th>
          <th>Density</th>
          <th>CO2/kg</th>
          <th>Carbon</th>
          <th>Footprint</th>
        </tr>
      </thead>
      <tbody>
        {description.map((descrition) => (
          <tr key={descrition.id}>
            <td>{descrition.food}</td>
            <td>{descrition.quantity}</td>
            <td>{descrition.uom}</td>
            <td>{descrition.density}</td>
            <td>{descrition.carbon}</td>
            <td>{carbonCategory(descrition.carbon)}</td>
            <td>{carbonCategory(descrition.carbon)}</td>
          </tr>
        ))}
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>{totalCarbon}</td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  );
}

export default MyTable;

登录后复制

注意事项