Antd Table 渲染内部属性和对象数组

Question

我有一个 Antd Table，数据来自 axios API

 "data": [
    {
        "id": 1,
        "name": "Package 1",
        "services": [
            {
                "id": 1,
                "name": "Evaluation Core",
            }
        ]
    },
    {
        "id": 2,
        "name": "Package 2",
        "services": [
            {
                "id": 1,
                "name": "Evaluation BizCore",
            },
            {
                "id": 2,
                "name": "Certification Fizz"
            }
        ]
    }
],
"meta": {
    "current_page": 1,
    "last_page": 1,
    "per_page": 20,
    "total": 2,
    "total_results": 2
}

} 在此表中，我使用包的名称呈现一列，第二列我需要呈现 Services 数组中的任何名称属性。该列具有此数据索引：

dataIndex: ['services', 'name'],

如果有多个属性名称，则应使用“，”分隔渲染。我尝试了不同的方法，但似乎没有任何效果。 谢谢！！

Answer 1

如果我理解正确，您想呈现一个服务列，其中每个包可能有不同数量的服务。每个服务都有一个名称，您希望显示所有服务的名称属性以进行包聚合。例如包有Service 1和Service 2，应该显示Service 1,Service 2。

简单的答案是使用渲染。服务列可能如下所示。

  {
    title: "Services",
    dataIndex: "services",
    render: (services) => services.map(service => service.name).join(),
    key: "services"
  }

https://codesandbox.io/s/basic-antd-4-16-3-forked-q6ffo?file=/index.js

如果这不是预期的结果，请发表评论。