如何在antd表的嵌套数组内显示不同级别的数据答案

【问题标题】：How to display data from different levels inside a nested array in antd table如何在antd表的嵌套数组内显示不同级别的数据
【发布时间】：2022-08-22 18:12:18
【问题描述】：

我想在一个 antd 表中的数组中显示层次结构的不同级别的数据。例如，

{
  employees: [
    {
      id:\"II\",
      firstName: \"first name 1\",
      lastName: \"last name 1\",
      education: [
        {
          year: \"2010\",
          level: \"Bachelors ..\"
        },
        {
          year: \"2013\",
          level: \"Masters\"
        },
      ]
    },
    {
      id:\"22\",
      firstName: \"first name 2\",
      lastName: \"last name 2\",
      education: [
        {
          year: \"2010\",
          level: \"Bachelors ..\"
        },
        {
          year: \"2013\",
          level: \"Masters\"
        },
        {
          year: \"2020\",
          level: \"PHD\"
        }
      ]
    } ,
    {
      id:\"II\",
      firstName: \"first name 3\",
      lastName: \"last name 3\",
      education: [
        {
          year: \"2010\",
          level: \"Bachelors ..\"
        },
        {
          year: \"2013\",
          level: \"Masters\"
        },
        {
          year: \"2020\",
          level: \"PHD\"
        }
      ]
    } 
  ]
}

在像上面这样的 json 中，如果我想在 antd 表中将每个教育级别显示为一行，以及以下其他信息，

我将如何在 antd 中实现它。任何解决此问题的指导将不胜感激。提前致谢。

标签： javascript reactjs antd

【解决方案1】：

antd 文档中已经有一个示例 https://ant.design/components/table/#components-table-demo-tree-data

代码沙箱示例 https://codesandbox.io/s/9b6dxf

重点教育需要修改为儿童，所有与教育年相关的数据都可以在儿童级别内，

【讨论】：

嗨sojin，如果我没记错的话，上面的代码示例与可扩展行有关。
那么答案很简单。只需循环您的 JSON 并创建一个新数组，其中所有嵌套项目按相同顺序在一个级别中，然后使用 antd 普通表呈现相同

【解决方案2】：

要做到这一点，您必须通过循环更改 json，也许可以从这个示例中看出

const dataSource = [
{
  id: "II",
  firstName: "first name 1",
  lastName: "last name 1",
  education: [
    {
      year: "2010",
      level: "Bachelors .."
    },
    {
      year: "2013",
      level: "Masters"
    }
  ]
},
{
  id: "22",
  firstName: "first name 2",
  lastName: "last name 2",
  education: [
    {
      year: "2010",
      level: "Bachelors .."
    },
    {
      year: "2013",
      level: "Masters"
    },
    {
      year: "2020",
      level: "PHD"
    }
  ]
},
{
  id: "II",
  firstName: "first name 3",
  lastName: "last name 3",
  education: [
    {
      year: "2010",
      level: "Bachelors .."
    },
    {
      year: "2013",
      level: "Masters"
    },
    {
      year: "2020",
      level: "PHD"
    }
  ]
}
];

const columns = [
{
  title: "First Name",
  dataIndex: "firstName",
  key: "firstName"
},
{
  title: "Last Name",
  dataIndex: "lastName",
  key: "lastName"
},
{
  title: "Level",
  dataIndex: "level",
  key: "level"
},
{
  title: "Years",
  dataIndex: "year",
  key: "year"
}
];
const data = dataSource.map((item) => {
const data = item.education.map((item2, index) => {
  return {
    firstName: item.firstName,
    lastName: item.lastName,
    year: item2.year,
    level: item2.level
  };
});
return data;
});
const dataMerge = [].concat.apply([], data);

return <Table dataSource={dataMerge} columns={columns} />;

你可以在这里看到一个例子 https://codesandbox.io/s/kind-sea-urpq91?file=/src/App.js

希望这可以帮助

【讨论】：