最近项目中遇到一个问题,antd table的单元格合并问题,并且数据是包含子元素的数据类型。
import React from 'react';
import { Table} from 'antd';
class MyTable extends React.Component {
renderContent = (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (row.isMerge) {
obj.props.rowSpan = row.rowSpan;
}
return obj;
};
columns = [
{
title: '科室',
dataIndex: 'team',
render: this.renderContent
},
{
title: '停诊次数',
dataIndex: 'suspend',
render: this.renderContent,
},
{
title: '替诊次数',
dataIndex: 'replace',
render: this.renderContent,
},
{
title: '总计',
dataIndex: 'count',
render: this.renderContent,
},
{
title: '联系电话',
dataIndex: 'phone',
},
];
data = [
{
key: '1',
team: '心中诊疗中心',
suspend: 32,
replace: 5,
count: 37,
phone: 18889898989,
rowSpan: 3,
isMerge: true,
children: [
{
key : '2',
phone: 18889898989,
rowSpan: 0,
isMerge: true,
},
{
key: '22',
phone: 18889898989,
rowSpan: 0,
isMerge: true,
},
]
},
{
key: '3',
team: '眼科',
phone: 18889898888,
suspend: 10,
repalce: 3,
count: 13,
},
{
key: '4',
team: '小儿康复',
phone: 18900010002,
suspend: 23,
replace: 1,
count:24,
},
{
key: '5',
team: '肝胆外科',
phone: 18900010002,
rowSpan: 3,
isMerge: true,
suspend: 23,
replace:5,
count: 28,
children: [
{
key: '6',
phone: 18900010002,
rowSpan: 0,
isMerge: true,
},
{
key: '7',
phone: 18900010002,
rowSpan: 0,
isMerge: true,
}
]
},
{
key: '8',
team: '血管外科',
phone: 18900010002,
suspend: 15,
replace: 6,
count:21,
},
];
render() {
return (
<div>
<Table
columns={this.columns}
dataSource={this.data}
bordered
expandIconAsCell={false}
defaultExpandAllRows={true}
expandIconColumnIndex={-1}
/>
</div>
);
}
}
export default MyTable;
表格.png
网友评论