Ant Design Table表格动态合并

import React from "react";
import {Table} from 'antd'

const Demo = () => {
    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;
    };
 
 
    const columns  = [
        {
            title: '班级',
            dataIndex: 'class',
            key: 'class',
            render: (text, record, index) => {
                const obj = {
                    children: text !== null ? text : '',
                    props: {},
                };
                obj.props.rowSpan = mergeCells(text, data, 'class', index);// 对班级合并，则传班级的字段作为key值
                return obj;
            },
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '班主任',
            dataIndex: 'teacher',
            key: 'teacher',
        },
        {
            title: '语文',
            dataIndex: 'chinese',
            key: 'chinese',
        },
        {
            title: '数学',
            dataIndex: 'mathematics',
            key: 'mathematics',
        },
    ];
 
 
    const data = [
        {
            key: 1,
            class: '高三（1）',
            name: '张三',
            teacher: '郝老师',
            chinese: '89',
            mathematics: '89',
        },
        {
            key: 2,
            class: '高三（1）',
            name: '王五',
            teacher: '郝老师',
            chinese: '89',
            mathematics: '89',
        },
        {
            key: 3,
            class: '高三（2）',
            name: '李四',
            teacher: '张老师',
            chinese: '89',
            mathematics: '89',
        },
        {
            key: 4,
            class: '高三（2）',
            name: '小敏',
            teacher: '张老师',
            chinese: '89',
            mathematics: '89',
        },
        {
            key: 5,
            class: '高三（1）',
            name: '小米',
            teacher: '郝老师',
            chinese: '89',
            mathematics: '89',
        },
    ];
 
 
    return (
        <div>
            <Table dataSource={data} columns={columns} />
        </div>
    );

};

export default Demo;