antd rowSpan合并单元格

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

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

import { Table } from 'antd';
// colSpan的使用原理相似
const sharedOnCell = (_, index) => {
    if (_.floor) {
        return {
            rowSpan: _.floor,
        };
    }
    if (!_.floor) {
        return { rowSpan: 0 };
    }
};
const columns = [
    {
        title: '业务条线',
        dataIndex: 'name',
        key: 'name',
        onCell: sharedOnCell,
    },
    {
        title: '区域',
        dataIndex: 'key',
        key: 'key',
    },
    {
        title: '共计工位',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '生产PC数量',
        dataIndex: 'street',
        key: 'street',
    },
    {
        title: '生产PC开机数量',
        dataIndex: 'building',
        key: 'building',
    },
    {
        title: '生产PC开机率(%)',
        dataIndex: 'number',
        key: 'number',
    },
    {
        title: '生产PC登录总时长',
        dataIndex: 'companyAddress',
        key: 'companyAddress',
    },
    {
        title: '生产系统登录总时长',
        children: [
            {
                title: '统一运营平台',
                dataIndex: 'companyName',
                key: 'companyName',
            },
            {
                title: 'TFM系统',
                dataIndex: 'gender',
                key: 'gender',
            },
            {
                title: 'CSR坐席系统',
                dataIndex: 'gender1',
                key: 'gender1',
            },
            {
                title: '531通用业务处理平台',
                dataIndex: 'gender2',
                key: 'gender2',
            },
        ],
    },
];
const data = [];
let count = 0;
let floor = Math.floor(Math.random() * 10) || 5
console.log('第一次', floor);
for (let i = 0; i < 50; i++) {
    if ((i - count) === floor) {
        count = count + floor;
        floor = Math.floor(Math.random() * 10) || 5;
        console.log('第' + i + '次', floor);
    }

    data.push({
        floor: count === i ? floor : 0,
        key: i,
        name: 'John Brown' + i,
        age: 18 + i,
        street: 'Lake Park' + i,
        building: 'C' + i,
        number: 2035 + i,
        companyAddress: 'Lake Street 42' + i,
        companyName: 'SoftLake Co' + i,
        gender: 'M' + i,
        gender1: 'M' + i,
        gender2: 'M' + i,
    });
}
console.log('data=====', data);

const TableHead = () => (
    <Table
        pagination={false}
        columns={columns}
        dataSource={data}
        bordered
        size="middle"
        scroll={{
            x: 'calc(700px + 50%)',
            y: 400,
        }}
    />
);

export default TableHead;


版权声明:本文为web_cgh原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。