• 在以下实例中使用了antd的选项卡组件，tab组件demo

  ps:选项卡的标题是可以动态显示的

<TabPane tab={<span>机构详情({countInHall})家</span>} key="1">

例：查看该投资机构下的所有投资项目的融资情况：
---------在单页面动态创建多个表，每个表分别展示每个投资项目的融资记录

1.根据投资项目的个数动态创建table的数量

{storesArray.map((d, i) => (
              <div key={i}>
                <Table
                  className={styles.table}
                  columns={columns}
//对每个数据源reduce操作，使数据刚好满足填充到表格
                  dataSource={[d].reduce((acc, cur) => {
                    const firstCars = {
                      ...cur,
                      ...cur.inventoryCarList[0]
                    };
                    acc.push(...cur.inventoryCarList);
                    acc.fill(firstCars, 0, 1);
                    return acc;
                  }, [])}
                  size="middle"
                  rowKey="id"
                  bordered

ps:每一个表格的首列也是可以自定义数据

title.png

总结：通过选项卡组件和动态创建表格可以使复杂的数据有更加层次和清晰的展示。