antd 表格合计栏

用的Antd 的 UI 框架。

场景：table 中后面想添加一行合计。合计的值前端计算得到。目前想到两种方法。

第一种：比较好维护。
第二种：使用antd4中summary

方法一：把合计行插入到数组中

需要对每列求和，然后插入到数组中

import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, Input, Button, Card, Table } from 'antd';
/**
  * 单元格合并处理
  * @param text 当前单元格的值
  * @param data 当前分页所有数据
  * @param key 当前列的dataIndex
  * @param index 当前数据所在下标
  * @returns {number} 待合并单元格数量
  */
const mergeCells = (text, data, key, index) => {
    // 上一行该列数据是否一样
    if (index !== 0 && text === data[index - 1][key]) {
        return 0
    }
    let rowSpan = 1
    // 判断下一行是否相等
    for (let i = index + 1; i < data.length; i++) {
        if (text !== data[i][key]) {
            break
        }
        rowSpan++
    }
    return rowSpan
}

export default () => {
    const list = [
        {
            id: '1',
            group: '组一',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组一',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组二',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组二',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组三',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组四',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组五',
            age: 32,
            age1: 8,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组五',
            age: 32,
            age1: 32,
            user: '用户1',
            select: true,
        },
    ];
    //定义获取求和方法
    const getSummaries = (columns, data) => {
        const sums = [];
        let sumsInfo = {};
        columns?.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总价';
                sumsInfo = { total: '合计' }
                return;
            }
            const values = data?.map(item => item[column.dataIndex]);
            if (!values.every(value => isNaN(value))) {
                let sum = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
                sums[index] = sum
                sumsInfo = { ...sumsInfo, [column.dataIndex]: sum }
                sums[index] += ' 元';
            } else {
                sums[index] = 'N/A';
            }
        });
        return { sumsInfo, sums };
    }

    const getTotal = (columns, currentData) => {
        const sums = {
            index: '',
            group: '',
            age: 0,
            age1: 0,
            user: '合计',
        }
        let sumObj = getSummaries(columns, currentData).sumsInfo
        return { ...sums, ...sumObj }
    }
    const columns = [
        {

            title: 'group',
            dataIndex: 'group',
            key: 'group',
            render: (text, record, index) => {
                const obj = {
                    children: text !== null ? text : '',
                    props: {}
                }
                obj.props.rowSpan = mergeCells(text, dataSource, 'group', index)
                return obj
            }
        },
        {
            title: '用户',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '年龄',
            dataIndex: 'age1',
            key: 'age1',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];
    let sums = getTotal(columns, list)
    const dataSource = list && list.length > 0 ? [...list, sums] : [];

    console.log("getTotal", getTotal(columns, list))


    return (
        <PageContainer>
            <Card title="Default size card">
                <Table dataSource={dataSource} columns={columns} rowKey={record => record.id} bordered
                />
            </Card>
        </PageContainer>
    );
}

方法二、使用antd4中summary

import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, Input, Button, Card, Table } from 'antd';
/**
  * 单元格合并处理
  * @param text 当前单元格的值
  * @param data 当前分页所有数据
  * @param key 当前列的dataIndex
  * @param index 当前数据所在下标
  * @returns {number} 待合并单元格数量
  */
const mergeCells = (text, data, key, index) => {
    // 上一行该列数据是否一样
    if (index !== 0 && text === data[index - 1][key]) {
        return 0
    }
    let rowSpan = 1
    // 判断下一行是否相等
    for (let i = index + 1; i < data.length; i++) {
        if (text !== data[i][key]) {
            break
        }
        rowSpan++
    }
    return rowSpan
}

export default () => {
    const dataSource = [
        {
            id: '1',
            group: '组一',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组一',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组二',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组二',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组三',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组四',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组五',
            age: 32,
            user: '用户1',
            select: true,
        },
        {
            id: '1',
            group: '组五',
            age: 32,
            user: '用户1',
            select: true,
        },
    ];
    const columns = [
        {

            title: 'group',
            dataIndex: 'group',
            key: 'group',
            render: (text, record, index) => {
                const obj = {
                    children: text !== null ? text : '',
                    props: {}
                }
                obj.props.rowSpan = mergeCells(text, dataSource, 'group', index)
                return obj
            }
        },
        {
            title: '用户',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '年龄',
            dataIndex: 'age2',
            key: 'age2',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];
    /**
   * @fun self-define summery.
   * @param currentData
   * @returns {*}
   */
    const onSummary = (currentData) => {
        const a = {
            index: '总计',
            user: "总计",
            age: 0,
            

        };
        console.log(currentData);
        const data = currentData.reduce((total, currentValue, currentIndex, arr) => {
            return {
                ...a,
                age: total.age + currentValue.age,
            }
        }, a)
        return <>
            <Table.Summary.Row>
                {columns
                    .map((i, j) =>
                        <Table.Summary.Cell key={j + 1} index={j + 1}>
                            {data[i.dataIndex]}
                        </Table.Summary.Cell>
                    )
                }
            </Table.Summary.Row>
        </>
    }

    return (
        <PageContainer>
            <Card title="Default size card">
                <Table dataSource={dataSource} columns={columns} rowKey={record => record.id} bordered
                    summary={(currentData) => onSummary(currentData)}
                />
            </Card>
        </PageContainer>
    );
}