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版权协议,转载请附上原文出处链接和本声明。