antd 单元格合并处理

实现效果

代码

tableData为Table的数据

const mergeCells = (text, dataSource, index, key) => {
    // 上一行该列数据是否一样
    if (index !== 0 && text === dataSource[index - 1][key]) {
        return 0
    }
    let rowSpan = 1
    // 判断下一行是否相等
    for (let i = index + 1; i < dataSource.length; i++) {
        if (text !== dataSource[i][key]) {
            break
        }
        rowSpan++
    }
    return rowSpan
}

const columns = [
    {
        title: () => (
            <div className={s.tableTitle}>
                编制时间：{reportData.time}
            </div>
        ),
        dataIndex: 'ybb',
        key: 'ybb',
        children: [
            {
                title: '所属污水处理厂',
                dataIndex: 'plant',
                key: 'plant',
                align: 'center',
                render: (value, row, index) => {
                    const obj = {
                        children: value || '',
                        props: {}
                    }
                    obj.props.rowSpan = mergeCells(value, tableData, index, 'plant')
                    return obj
                }
            },
            {
                title: '所属泵站',
                dataIndex: 'pump',
                key: 'pump',
                align: 'center',
                render: (value, row, index) => {
                    const obj = {
                        children: value || '',
                        props: {}
                    }
                    obj.props.rowSpan = mergeCells(value, tableData, index, 'pump')
                    return obj
                }
            },
            {
                title: '道路编码',
                dataIndex: 'road',
                key: 'road',
                align: 'center',
            },
        ]
    }
]