Ant.design 表格嵌套

版权声明：本文为博主原创文章，未经博主允许不得转载。如需转载，请标明转载地址！！！！ 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>
    )
  }
}