antd table合并行或者列（动态添加合并行、列）

antd table合并行或者列（动态添加合并行、列）

表头只支持列合并，使用 column 里的 colSpan 进行设置。

表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

数据：

  dataTableData = [
            {
                key: "0",
                "category": "水果",
                "name": "桃子",
                "desc": "好吃"
            }, {
                key: "1",
                "category": "水果",
                "name": "茄子",
                "desc": "好吃"
            }, {
                key: "3",
                "category": "家禽",
                "name": "牛肉",
                "desc": "好吃"
            }, {
                key: "4",
                "category": "家禽",
                "name": "牛肉",
                "desc": "好吃到停不下来"
            }, {
                key: "5",
                "category": "家禽",
                "name": "猪肉",
                "desc": "吃不起，太贵"
            }
        ]

列属性：

const columnsData = [
            {
                title: '分类',
                dataIndex: 'category',
                width:"30%",
                render: (value, row, index) => {
                    const obj = {
                        children: value,
                        props: {},
                    };
                    obj.props.rowSpan = row.categoryrowSpan;
                    return obj;
                }
            },
            {
                title: '名称',
                dataIndex: 'name',
                width:"30%",
                render: (value, row, index) => {
                    const obj = {
                        children: value,
                        props: {},
                    };

                    obj.props.rowSpan = row.namerowSpan;
                    return obj;
                }
            },
            {
                title: '评价',
                dataIndex: 'desc',
                render: (value, row, index) => {
                    const obj = {
                        children: value,
                        props: {},
                    };
                    obj.props.rowSpan = row.descrowSpan;
                    return obj;
                }
            },
        ];

对数据进行处理：

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


// rowSpan  合并列
// colSpan  合并行
// reference 参照列
export const changeDataReference = (data, field, reference) => {
    console.log(data, 'datadatadatadatadatadata')
    let count = 0;//重复项的第一项
    let indexCount = 1;//下一项
    while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0];//获取没有比较的第一个对象
        if (!item[`${field}rowSpan`]) {
            item[`${field}rowSpan`] = 1;//初始化为1
        }
        if (item[field] === data[indexCount][field] && item[reference] === data[indexCount][reference]) {//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
            item[`${field}rowSpan`]++;
            data[indexCount][`${field}rowSpan`] = 0;
        } else {
            count = indexCount;
        }
        indexCount++;
    }
    return data
}

/**
 * 
 * @param {
 * *} data  数据源
 * @param {*} field  合并标识
 * @param {*} referenceList []数组  第一项为合并参照   后面的以第一项为参照
 * @param {*} reference2     除了referenceList中的项，其他都按照 reference2参照
 */
export const changeData2 = (data, field, referenceList, reference2) => {
    let count = 0;//重复项的第一项
    let indexCount = 1;//下一项
    while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0];//获取没有比较的第一个对象
        if (!item[`${field}rowSpan`]) {
            item[`${field}rowSpan`] = 1;//初始化为1
        }
        if (referenceList.includes(field) ) {
            if (item[field] === data[indexCount][field] && item[referenceList[0]] === data[indexCount][referenceList[0]]) {//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
                item[`${field}rowSpan`]++;
                data[indexCount][`${field}rowSpan`] = 0;
            } else {
                count = indexCount;
            }
        } else {
            if (item[field] === data[indexCount][field] && item[reference2] === data[indexCount][reference2] && item[referenceList[0]] === data[indexCount][referenceList[0]]) {//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
                item[`${field}rowSpan`]++;
                data[indexCount][`${field}rowSpan`] = 0;
            } else {
                count = indexCount;
            }
        }
        indexCount++;
    }
    return data
}

对data中的数据进行改造：

 let propsList = ['category', 'name', 'desc']
        propsList.map(item => {
            dataTableData = changeData(dataTableData, item)
        })

页面：

<Table columns={columnsData} dataSource={dataTableData} bordered />

参考：
https://blog.csdn.net/weixin_44135121/article/details/108277720

2023/08/22补充

今天遇到了新需求，需要合并左侧的多选框，以前没碰到也就没处理

    const rowSelection = {
        // selectedRowKeys,
        // onChange: onSelectChange,
        renderCell: (checked, record, index, originNode) => {
            const obj = {
                children: originNode,
                props: {
                    rowSpan: record.categoryrowSpan
                },
            };
            return obj;
        }
    };

上面的写法就可以满足

搞定，ok 就这样