嵌套的 antd 表不呈现 antd

Question

我正在尝试在 antd 的 table 中渲染一个嵌套的 table，问题是行没有显示，行之间有正确的 space 但是由于某种原因，我无法看到数据。

我的做法是在 parent table 上属性 'expandedRowRender':

<Table
          rowKey="uuid"
          columns={this.getColumns()}
          data={data}
         expandedRowRender={record => this.expandedRowRender(record.children)}
/>

我的 parent table 中的列是：

getColumns() {
    const columns = [
      {
        title: translate('name'),
        dataIndex: 'name',
      },
      {
        title: translate('type'),
        width: '30%',
        dataIndex: 'docType',
        render: (val, rec) => {
          return rec.parent
            ? `${translate('subcategory')} (${rec.parent[0].name})`
            : translate('category')
        },
      },
    ]

    columns[0] = this.addSearchFilter({
      column: columns[0],
      key: 'name',
      type: 'search',
      refreshKey: 'categories',
    })

    return columns
  }

和嵌套的 table 应该显示：

expandedRowRender = row => {
   
    const columnas = [
      {
        title: translate('name'),
        key: 'name',
        render: val => {
          return <div>{val.name}</div>
        },
      },
      {
        title: translate('docType'),
        key: 'docType',
        render: (val, rec) => {
          return (
            <div>
             {rec.data},
            </div>
          )
        },
      },
    ]

    return (
      <Table
        columns={columnas}
        dataSource={row}
        rowKey={row.uuid}
      />
    )
  }

我一直在四处浏览，但我找不到任何帮助，关于行上的唯一键有一些东西，但我已经指向两个 tables

上的键

更新

找到问题了，apparently是给嵌套指定key的问题table:

<Table
       columns={columns}
          dataSource={row}
          pagination={false}
          rowKey={record => record.uuid}
          key="a"
/>

Answer 1

回答

我发现了问题，显然是指定嵌套键的问题 table:

<Table
       columns={columns}
          dataSource={row}
          pagination={false}
          rowKey={record => record.uuid}
          key="a"
/>

嵌套的 antd 表不呈现 antd

Nested antd tables not renderring antd

reactjs

antd