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

Question

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

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 中显示插槽键，所以 预期输出 是

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;

请帮助我哪里错了？？

Answer 1

由于在你的数据中slots 属性是一个对象，antd不能直接在table中显示，所以你可以使用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 上的数据和列定义的示例。

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

Displaying nested Object Key in Ant Design Table

reactjs

antd