react antd table 增加底部合计行统计,固定在底部设置样式

最终效果

1.对table data 数据相同元素进行累加

    // 判断是否为数字
    const isNumber = (str) => {
        const reg = /^(-?\d+)(\.\d+)?$/;
        return reg.test(str);
    };

   const sameKeySummataion = (arr:[], matchKey) => {
        let obj = {}
        arr.forEach((item) => {
            for (let key in item) {
                if (matchKey.indexOf(key) !== -1) {
                    let value = item[key]
                    if (isNumber(value)) {
                        key in obj ? (obj[key] += Number(value)) : (obj[key] = Number(value))
                    }
                }
            }
        })

        // 这一步可省略  这里为了保留最终数据都包含两位小数点
        for (var i in obj) {
            obj[i] = obj[i].toFixed(2)
        }
        return obj
    }

2.调用，修改data值。data是后端返回给前端的表格数据

  const hejiTotal: any = sameKeySummataion(data, columnsKey);
        hejiTotal.shortName = "合计"
        data.push(hejiTotal)

3.给table增加rowClassName

 <Table columns={columns}  dataSource={dataSource} bordered  pagination={false} scroll={{  x: 'calc(700px + 50%)', y: 400}}  rowClassName={(record, index) => {
                        //最后一行是否高亮样式
                        const isLastRow = index === dataSource.length - 1;
                        return isLastRow ? 'lastRowHigh' : '';
                    }}
                />

4.设置lastRowHigh 样式，设置颜色、固定在底部

 .lastRowHigh {
                background-color: #ddecf8;
                font-weight: bold;
                color: #2870a9;
                position: sticky;
                bottom: 0;
                z-index: 8;
                overflow: auto;
                .ant-table-cell {
                    background-color: #ddecf8;
                }
                >.ant-table-cell-row-hover {
                    background-color: #ddecf8;
                }
            }

5.完整代码

import React, { useEffect, useState, useRef } from 'react';
import styles from './index.less'
import { Table, Typography } from 'antd';
import { number } from 'echarts';
const { Text } = Typography;

interface TableProps {
    authTags: any[];
    [p: string]: any;
    data: any[],
}


const TablePage: React.FC<TableProps> = props => {
    const { data } = props;
    const columns: any = [
        {
            title: '集团名称',
            width: 100,
            dataIndex: 'shortName',
            key: 'shortName',
            fixed: 'left',
            ellipsis: true,
            align: 'center',
            onCell: (text: any, index: number) => {
                if (index === data.length - 1) {
                    return {
                        colSpan: 2
                    };
                } else {
                    return {
                        colSpan: 1
                    };
                }
            },
        },
        {
            title: '基金类型',
            dataIndex: 'jjlx',
            width: 100,
            key: 'jjlx',
            ellipsis: true,
            align: 'center',
            fixed: 'left',
            onCell: (text: any, index: number) => {
                if (index === data.length - 1) {
                    return {
                        colSpan: 0
                    };
                } else {
                    return {
                        colSpan: 1
                    };
                }
            },
            
        }]

    // 判断是否为数字
    const isNumber = (str) => {
        const reg = /^(-?\d+)(\.\d+)?$/;
        return reg.test(str);
    };

    // 数组相同元素累加
    const sameKeySummataion = (arr, matchKey) => {
        let obj = {}
        arr.forEach((item) => {
            for (let key in item) {
                if (matchKey.indexOf(key) !== -1) {
                    let value = item[key]
                    if (isNumber(value)) {
                        key in obj ? (obj[key] += Number(value)) : (obj[key] = Number(value))
                    }
                }
            }
        })
        // 这一步可省略  这里为了保留最终数据都包含两位小数点
        for (var i in obj) {
            obj[i] = obj[i].toFixed(2)
        }
        return obj
    }

    if (data.length) {
        const hejiTotal: any = sameKeySummataion(data, columnsKey);
        hejiTotal.shortName = "合计"
        data.push(hejiTotal)
    }

    return (
        <div

            style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
            }}>

           <Table
                    id="exportTable"
                    columns={columns}
                    dataSource={dataSource}
                    bordered
                    pagination={false}
                    scroll={{
                        x: 'calc(700px + 50%)',
                        y: 400
                    }}
                    rowClassName={(record, index) => {
                        //最后一行是否高亮样式
                        const isLastRow = index === dataSource.length - 1;
                        return isLastRow ? 'lastRowHigh' : '';
                    }}
                />
        </div>
    );
};

export default TablePage;