Ant.design 表格嵌套

最新推荐文章于 2025-06-23 00:09:06 发布

原创最新推荐文章于 2025-06-23 00:09:06 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #子表格

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍如何使用 Ant Design 的 table 组件通过 expandedRowRender 属性实现表格嵌套，展示主表与子表数据，并支持子表数据动态更新。代码示例展示了如何定义子表列与数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做业务的时候有一个需求，需要设计一个表格嵌套的样式，使用了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>
    )
  }
}