javascript - Antd Table：如何用列表中的对象渲染表格

Question

我正在使用带有 React 的 Antd Table。我想在没有 expandRowRender的列表中按对象呈现表格。

我的列表 ：

dataSource = [
  {
    firstName: 'John',
    lastName: 'K.',
    car: [
          {
              brand: 'BMW',
              color: 'white',
          },
          {
              brand: 'Mercedes-benz',
              color: 'red',
          }
    ]
  },
  {
    firstName: 'Emma',
    lastName: 'W.',
    car: [
          {
              brand: 'BMW',
              color: 'black',
          }
    ]
  }
]

我的代码如下：

<Table
     rowKey={(record, index) => {return index}}
     columns={columns}
     dataSource={dataSource}
/>

并期望这样的表格：

标签： javascriptreactjsreact-nativeantd

Answer 1

您可以使用列配置的渲染属性：

const renderCustomCell= (object) => {
    /** render your custom cell with object properties here */
    const { car } = object;
    return <...>;
};

{
    title: 'column title',
    key: 'column_key',
    render: object => renderCustomCell(object),
}