如何在antd表的嵌套數組內顯示不同級別的數據

Question

我想在一個 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 中實現它。 任何解決此問題的指導將不勝感激。 提前致謝。

Answer 1

antd 文檔https://ant.design/components/table/#components-table-demo-tree-data中已經有一個示例

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

重點教育需要修改為兒童，所有與教育年相關的數據都可以在兒童級別內，

Answer 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

希望這可以幫助