在 Ant Design Table 中显示嵌套的对象键答案

【问题标题】：Displaying nested Object Key in Ant Design Table在 Ant Design Table 中显示嵌套的对象键
【发布时间】：2022-01-22 00:48:07
【问题描述】：

我有一个像这样的对象结构：-

const data = {
    "message": "Success",
    "responce": [
        {
            "created_AT": "Wed, 01 Dec 2021 15:39:48 GMT",
            "created_BY": "John",
            "dateTime": "Wed, 01 Dec 2021 15:39:48 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "slots": {
                "email_org": {
                    "influence_conversation": false,
                    "initial_value": null,
                    "type": "text"
                }
            },
            "slots_ID": "f539ba87-26ee-4287-9037-0ffcf8387593",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Mon, 20 Dec 2021 13:30:27 GMT",
            "created_BY": "john",
            "dateTime": "Mon, 20 Dec 2021 13:30:27 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "slots": {
                "mobile_number": {
                    "influence_conversation": false,
                    "initial_value": null,
                    "type": "text"
                }
            },
            "slots_ID": "505004fb-f6e5-4eef-81a7-eaf078484d8b",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Mon, 20 Dec 2021 13:36:24 GMT",
            "created_BY": "john",
            "dateTime": "Mon, 20 Dec 2021 13:36:24 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "slots": {
                "test_mobile_number": {
                    "influence_conversation": false,
                    "initial_value": null,
                    "type": "text"
                }
            },
            "slots_ID": "fb6529f8-8d45-469d-aa17-a53109c86fc1",
            "updated_BY": "",
            "user_ID": "av1234"
        }
    ],
    "status_code": 0
}

现在我想在ant design table中显示slots key，所以预期输出是

Slot Name	Created By
email_org	John
mobile_number	John
test_mobile_number	John

但我得到的是下面

Slot Name	Created By
	John
	John
	John

代码，注意 slotData 是我上面提到的数据对象。

const [dataSource, setDataSource] = useState(slotData)
  const columns = [
    {
      title: "Slot Name",
      dataIndex: "slots",
      key: "slots_ID",
    },
    {
      title: "Created By",
      dataIndex: "created_BY",
      key: "created_BY",
    },
  ];
  return (
    <>
      <Card className="csi-project-card-0934">
        <Table
          bordered
          className="ib-table"
          dataSource={dataSource.responce}
          columns={columns}
          pagination={{ pageSize: 6 }}
          rowKey={Math.random().toString()}
        />
      </Card>
    </>
  );
};
export default SlotTable;

请帮忙，我哪里错了？？

【问题讨论】：

标签： reactjs antd

【解决方案1】：

由于在您的数据中slots 属性是一个对象，antd 无法直接在表格中显示它，因此您可以在列定义上使用render 属性来实现您的目标。像这样：

const columns = [
  {
    title: 'Slot Name',
    dataIndex: 'slots',
    key: 'slots_ID',
    render: item => Object.keys(item)[0],
  },
  {
    title: 'Created By',
    dataIndex: 'created_BY',
    key: 'created_BY',
  },
];

Here 是您在 stackblitz 上定义数据和列的示例。

【讨论】：