如何在PrimeReact DataTable中展示所有stdCtExamMarks数据？

你现在的代码只提取了第一个学生的stdCtExamMarks数组，所以只能看到单个学生的成绩。要展示所有学生的成绩，我们需要先把所有学生的成绩数据整合起来，或者用嵌套表格的方式呈现，下面给你两种可行的方案：

先看你当前的代码参考： #

构造函数代码 #

constructor() { 
  super(); 
  this.exportpdf = this.exportpdf.bind(this); 
  this.state = { 
    sales: [ 
      { 
        customStudentId: "2064517", 
        studentRoll: 26, 
        studentName: "Md. Faiaz Jakir ", 
        stdCtExamMarks: [ 
          { 
            viewSerial: 1, 
            subjectName: "Bangla ", 
            subjectFullMark: 25, 
            obtainedMark: 0, 
            highestMarks: 25 
          } 
        ] 
      }, 
      { 
        customStudentId: "2065817", 
        studentRoll: 27, 
        studentName: "Miraj Bin Atik ", 
        stdCtExamMarks: [ 
          { 
            viewSerial: 1, 
            subjectName: "English ", 
            subjectFullMark: 25, 
            obtainedMark: 0, 
            highestMarks: 25 
          } 
        ] 
      } 
    ] 
  }; 
}

当前的DataTable代码 #

<DataTable value={this.state.sales[0].stdCtExamMarks}> 
  <Column field="subjectName" header="Subject" /> 
  <Column field="subjectFullMark" header="Full Mark" /> 
  <Column field="obtainedMark" header="Obtained Mark" /> 
  <Column field="highestMarks" header="Highest Mark" /> 
</DataTable>

方案1：合并所有学生的成绩数据（推荐） #

这种方式会把每个学生的成绩项和学生基本信息（学号、姓名等）合并成一个统一的数组，让DataTable可以一次性展示所有成绩，还能区分每个成绩属于哪个学生。

修改后的代码如下：

render() {
  // 遍历所有学生，把每个学生的成绩项和个人信息合并
  const allStudentMarks = this.state.sales.flatMap(student => {
    return student.stdCtExamMarks.map(mark => ({
      ...mark, // 展开成绩数据
      // 加入学生基本信息
      studentRoll: student.studentRoll,
      studentName: student.studentName,
      customStudentId: student.customStudentId
    }));
  });

  return (
    <DataTable value={allStudentMarks}>
      {/* 新增学生信息列，方便区分 */}
      <Column field="studentRoll" header="Roll No" />
      <Column field="studentName" header="Student Name" />
      <Column field="subjectName" header="Subject" />
      <Column field="subjectFullMark" header="Full Mark" />
      <Column field="obtainedMark" header="Obtained Mark" />
      <Column field="highestMarks" header="Highest Mark" />
    </DataTable>
  );
}

如果希望按学生分组展示，只需要给DataTable加上groupBy属性即可：

<DataTable value={allStudentMarks} groupBy="studentName">
  {/* 列定义和上面一致 */}
</DataTable>

方案2：嵌套DataTable（按学生独立展示成绩） #

如果你希望每个学生占据一行，然后在该行内展示该学生的所有成绩，可以用嵌套表格的方式实现：

<DataTable value={this.state.sales}>
  <Column field="studentRoll" header="Roll No" />
  <Column field="studentName" header="Student Name" />
  {/* 嵌套表格列，展示当前学生的成绩 */}
  <Column header="Exam Marks">
    {(rowData) => (
      <DataTable value={rowData.stdCtExamMarks} size="small">
        <Column field="subjectName" header="Subject" />
        <Column field="subjectFullMark" header="Full Mark" />
        <Column field="obtainedMark" header="Obtained Mark" />
        <Column field="highestMarks" header="Highest Mark" />
      </DataTable>
    )}
  </Column>
</DataTable>

这种方式适合需要清晰区分每个学生成绩组的场景，外层表格展示学生基本信息，内层表格展示对应学生的各科成绩。

内容的提问来源于stack exchange，提问作者Aarif Hasan