react antd table合并案例

1.合并方法，给data数据增加rowSpan值

/**
**data:tabel数据
**field：列key值
**/

const addRowSpan = (data: any[], field: string) => {
    let count = 0 //重复项的第一项
    let indexCount = 1 //下一项
    while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
        if (!item.rowSpan) {
            item.rowSpan = 1 //初始化为1
        }
        if (item[field] === data[indexCount][field]) {
            //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
            item.rowSpan++
            data[indexCount].rowSpan = 0
        } else {
            count = indexCount
        }
        indexCount++
    }
}

2.调用addRowSpan

let field = 'category'
addRowSpan(data, field) //处理数据

3.完整代码

import React from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
    key: number,
    category: string,
    name: string,
    desc: string,
    rowSpan: number
}

const columns: ColumnsType<DataType> = [
    {
        title: '种类',
        dataIndex: 'category',
        key: 'category',
        onCell: (record, index) => {
            // console.log(record.category, record.rowSpan)
            return { rowSpan: record.rowSpan }
        },
    },
    {
        title: '名字',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
    },

    {
        title: '描述',
        dataIndex: 'desc',
        key: 'desc',
    }
];

const data: any[] =
    [
        {
            key: 0,
            category: '水果',
            name: '桃子',
            desc: '好吃',
        },
        {
            key: 1,
            category: '水果',
            name: '梨子',
            desc: '真好吃',
        },
        {
            key: 2,
            category: '蔬菜',
            name: '茄子',
            desc: '真好吃',
        },
        {
            key: 9,
            category: '蔬菜',
            name: '茄子',
            desc: '真好吃',
        },
        {
            key: 3,
            category: '家禽',
            name: '牛肉',
            desc: '太好吃了',
        },
        {
            key: 4,
            category: '家禽',
            name: '羊肉',
            desc: '真不错',
        },
        {
            key: 5,
            category: '家禽',
            name: '猪肉',
            desc: '吃不起，太贵',
        },
        {
            key: 4,
            category: '家禽',
            name: '羊肉',
            desc: '真不错',
        },
        {
            key: 5,
            category: '家禽',
            name: '猪肉',
            desc: '吃不起，太贵',
        },
    ]

const addRowSpan = (data: any, field: string) => {
    let count = 0 //重复项的第一项
    let indexCount = 1 //下一项
    while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
        if (!item.rowSpan) {
            item.rowSpan = 1 //初始化为1
        }
        if (item[field] === data[indexCount][field]) {
            //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
            item.rowSpan++
            data[indexCount].rowSpan = 0
        } else {
            count = indexCount
        }
        indexCount++
    }
}
let field = 'category'
addRowSpan (data, field) //处理数据

const App: React.FC = () => <Table columns={columns} bordered dataSource={data} />;

export default App;