【避坑指“难”】Antd Table可折叠嵌套List

实现效果如下图：

核心功能代码

给ProTable 或 Table组件配置expandable={{ expandedRowRender }}

const expandedRowRender = (record: any) => {
    return (
      <List
        style={{ width: 300, marginLeft: 315 }}
        size="small"
        split={false}
        dataSource={record.child}
        renderItem={(item: any) => (
          <List.Item key={item.strategyId}>
            <List.Item.Meta description={`${item.name} ${item.updateTime}`} />
              <a>编辑</a>
          </List.Item>
        )}
      />
    );
  };

dataSource渲染格式

{
    id: '001',
    name: '1',
    createTime: '2022-03-31 12:33:34',
    createUser: '管理员',
    desc: 'desc',
    child:[
        {
            id: '123',
            name: '12',
            updateTime: '2022-03-31 12:33:56',
            updateUser: '管理员',
        }
    ]
}