Ant Design 表格中的嵌套 dataIndex答案

【问题标题】：nested dataIndex in Table of Ant DesignAnt Design 表格中的嵌套 dataIndex
【发布时间】：2022-01-13 05:57:54
【问题描述】：

这是我下面的代码

const columns =  [
    {
          key: '1',
          title: 'id',
          dataIndex: 'id'
    },
    {
          key: '2',
          title: 'status',
          dataIndex: 'status',
          render: (text) => <a> {text} </a>
     },
];

我想像下面的代码一样显示数据（ text/id ）

 const columns =  [
    {
          key: '1',
          title: 'id',
          dataIndex: 'id'
    },
    {
          key: '2',
          title: 'status',
          dataIndex: ['status', 'id'],
          render: (text) => <a> {text} / {id} </a>
     },
];

我试着喜欢这个样本

1. dataIndex: ['status', 'id']
2. dataIndex: 'status.id'

但这不起作用。（版本 4.14.0）我怎么能这样显示？请在这里回复。谢谢。

【问题讨论】：

标签： antd

【解决方案1】：

假设您传递给dataSource 的是一组对象，如下所示。

interface DataModel {
  id: number;
  status: string;
}

如果是这样，您可以使用render 方法中的第二个参数，该参数将具有记录。因此record.id 会给你 id。

 const columns =  [
    {
          key: '1',
          title: 'id',
          dataIndex: 'id'
    },
    {
          key: '2',
          title: 'status',
          dataIndex: ['status'],
          render: (text: any, record: any) => <a> {text} / {record.id} </a>
     },
];

【讨论】：