用nz-tabel写一个合并表格

用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>
相关推荐
像是套了虚弱散1 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
旭意1 小时前
C++蓝桥杯之结构体10.15
开发语言·c++
毕设源码-赖学姐2 小时前
【开题答辩全过程】以 基于Android的校园快递互助APP为例,包含答辩的问题和答案
java·eclipse
Tom4i2 小时前
Android 系统的进程模型
android
damo012 小时前
stripe 支付对接
java·stripe
介一安全2 小时前
【Frida Android】基础篇9:Java层Hook基础——Hook构造函数
android·网络安全·逆向·安全性测试·frida
杨筱毅2 小时前
【Android】Compose绘制系统 VS 传统View绘制系统
android
介一安全2 小时前
【Frida Android】基础篇10:Native层Hook基础--普通 Hook
android·网络安全·逆向·安全性测试·frida
麦麦鸡腿堡3 小时前
Java的单例设计模式-饿汉式
java·开发语言·设计模式
简单点了3 小时前
go前后端项目的启动 、打包和部署
开发语言·后端·golang