版权声明:本文为博主原创文章,未经博主允许不得转载。如需转载,请标明转载地址!!!! https://blog.csdn.net/Crystalqy/article/details/81318218
最近在做业务的时候有一个需求,需要设计一个表格嵌套的样式,使用了ant.design的table的expandedRowRender属性实现的。涉及到字表数据动态更新
export class CreditDetail extends React.Component {
render() {
const expandedRowRender = (record) => {
const subTabData = record.dkSaleOrderDetailVoLst;
const columns = [
{ title: '子列1', dataIndex: 'goodsAttrName', key: 'goodsAttrName' },
{ title: '子列2', dataIndex: 'supplierName', key: 'supplierName' },
];
return (
<Table
columns={columns}
dataSource={subTabData}
pagination={false}
/>
);
};
const columns = [{
title: '主列1',
dataIndex: 'orderNo',
key: 'orderNo',
},{
title: '主列2',
dataIndex: 'todayNo',
key: 'todayNo',
}];
return (
<div>
<Table
dataSource={dkSaleOrderVoLst}
columns={columns}
expandedRowRender={expandedRowRender}
>
</Table>
</div>
)
}
}