蚂蚁V3。 Table 个组件。如何计算列值的总和

Question

我需要你的帮助来使用 Ant Design Table 组件计算列值的总和。

这里是 table 的例子： [例子][1] [1]: https://i.stack.imgur.com/CYBRO.png

这是我的列和行代码：

const dataSource = [
  {
    key: '1',
    name: 'Jon',
    apple: 1,
    orange: 1,
  },
  {
    key: '2',
    name: 'Ron',
    apple: 0,
    orange: 3,
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Apple',
    dataIndex: 'apple',
    key: 'apple',
  },
  {
    title: 'Orange',
    dataIndex: 'orange',
    key: 'orange',
  },
];

<Table dataSource={dataSource} columns={columns} />;

我知道在 Antd 版本 4 中很容易做到，但我现在无法迁移。

如何计算每列的总和以将其推送到新行？

Answer 1

你可以使用这样的东西

<Table
    columns={columns}
    dataSource={data.concat(
      (() => {
        let apple = 0;
        let orange = 0;
        for (let row of data) {
          apple += row["apple"];
          orange += row["orange"];
        }
        return { key: "total", name: "Total (by Column)", apple, orange };
      })()
    )}
  />

蚂蚁V3。 Table 个组件。如何计算列值的总和

Antd V3. Table component. How to calculate sum of column values

reactjs

antd