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: '所属污水处理厂',
        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',
    },
]