用nz-tabel写一个合并表格

html 复制代码

		<nz-table #basicTable [nzData]="tableSearchStatus.dataList" nzBordered>
          <thead>
            <tr>
              <th>班级</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>电话</th>
            </tr>
          </thead>
          <tbody>
            <!-- 使用 ng-container 进行循环 -->
            <ng-container *ngFor="let classItem of basicTable.data; let i = index">
              <!-- 第一行：班级名称和第一个学生的详细信息 -->
              <tr *ngIf="classItem.students.length > 0">
                <td [attr.rowspan]="classItem.students.length">{{ classItem.className }}</td>
                <td>{{ classItem.students[0].name }}</td>
                <td>{{ classItem.students[0].age }}</td>
                <td>{{ classItem.students[0].phone }}</td>
              </tr>
              <!-- 后续行：其余学生的详细信息 -->
              <tr *ngFor="let student of classItem.students.slice(1)">
                <td>{{ student.name }}</td>
                <td>{{ student.age }}</td>
                <td>{{ student.phone }}</td>
              </tr>
              <!-- 如果没有学生，则单独一行显示班级信息 -->
              <tr *ngIf="classItem.students.length === 0">
                <td>{{ classItem.className }}</td>
                <!-- 也可以不合并  在追加两个td -->
                <td colspan="3">无学生信息</td>
              </tr>
            </ng-container>
          </tbody>
        </nz-table>

js 复制代码

tableSearchStatus.dataList = [
   {
     className: "301班",
     students: [
       { name: "aa1", age: 11, phone: "1231231222" },
       { name: "aa2", age: 11, phone: "1231231233" },
       { name: "aa3", age: 11, phone: "12312312333" },
       { name: "aa4", age: 11, phone: "1231231233333" },
       { name: "aa5", age: 11, phone: "123123122222" },
     ],
   },
   {
     className: "12班",
     students: [
       { name: "aa1", age: 11, phone: "12312312" },
       { name: "aa2", age: 11, phone: "12312312" },
     ],
   },
   {
     className: "322班",
     students: [
       { name: "aa", age: 11, phone: "12312312" },
       { name: "aa", age: 11, phone: "12312312" },
     ],
   },
   {
     className: "3111班",
     students: [],
   },
   {
     className: "233班",
     students: [
       { name: "aa", age: 11, phone: "12312312" },
       { name: "aa", age: 11, phone: "12312312" },
     ],
   },
 ];

html 复制代码

 	 <table border="1">
           <thead>
             <tr>
               <th>班级</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>电话</th>
             </tr>
           </thead>
           <tbody>

         <ng-container *ngFor="let classItem of tableSearchStatus.dataList">
           <tr *ngIf="classItem.students.length > 0; else noStudentsTemplate">
             <td [attr.rowspan]="classItem.students.length">{{ classItem.className }}</td>
             <td>{{ classItem.students[0].name }}</td>
             <td>{{ classItem.students[0].age }}</td>
             <td>{{ classItem.students[0].phone }}</td>
           </tr>
           <tr *ngFor="let student of classItem.students.slice(1)">
             <td>{{ student.name }}</td>
             <td>{{ student.age }}</td>
             <td>{{ student.phone }}</td>
           </tr>
           <ng-template #noStudentsTemplate>
             <tr>
               <td>{{ classItem.className }}</td>
               <td colspan="3">无学生信息</td>
             </tr>
           </ng-template>
         </ng-container>
       </tbody>
     </table>