用antd写个复杂表格，还给你总计和平均值！

2023-12-25 22:50:56

前言

遇到一个需求，应该挺常见但是我却没怎么遇到，也费了不少功夫才解决，记录一下。

需求很简单，是个后台管理系统项目，要做个表格，用来展示一些数据。这个表格需要有总计和平均值，也就是说，在表格的最后一行，需要显示所有数据的总和和平均值。

实现方案

实现这个需求，我们可以使用antd table组件。antd table是一个很强大的表格组件，提供了很多开箱即用的功能，包括对总计和平均值的计算。

首先，我们需要安装antd table组件。

npm install antd

然后，在我们的代码中导入antd table组件。

import { Table } from 'antd';

接下来，我们需要创建一个表格的数据源。数据源是一个数组，数组中的每个元素都是一个对象，对象中包含了表格的每一行的数据。

const dataSource = [
  {
    name: 'John Doe',
    age: 30,
    address: '123 Main Street',
  },
  {
    name: 'Jane Smith',
    age: 25,
    address: '456 Elm Street',
  },
  {
    name: 'Michael Jones',
    age: 35,
    address: '789 Oak Street',
  },
];

然后，我们需要创建一个表格的列配置。列配置是一个数组，数组中的每个元素都是一个对象，对象中包含了表格的每一列的配置信息。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

现在，我们可以创建一个表格组件了。

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

这样，我们就创建了一个简单的表格。

为了在表格的最后一行显示总计和平均值，我们需要使用antd table组件的footer属性。footer属性是一个函数，该函数返回表格的最后一行。

<Table
  dataSource={dataSource}
  columns={columns}
  footer={() => {
    let totalAge = 0;
    dataSource.forEach((item) => {
      totalAge += item.age;
    });
    const averageAge = totalAge / dataSource.length;
    return (
      <tr>
        <td>总计</td>
        <td>{totalAge}</td>
        <td>{averageAge}</td>
      </tr>
    );
  }}
/>