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
}

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

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

如果有一个以上的属性名称，应以“,”分隔呈现。我尝试了不同的方法，但似乎没有任何效果。谢谢！！

Answer 1

如果我理解正确的话，您想呈现一个服务列，其中每个包可能有不同数量的服务。每个服务都有一个名称，您想要显示所有服务的名称属性以进行聚合。例如包裹有服务1和服务2，应该显示服务1，服务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

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

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

Antd Table render properties inside and array of objects

reactjs

antd