用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>
相关推荐
小蒜学长4 分钟前
springboot海洋馆预约系统的设计与实现(代码+数据库+LW)
java·数据库·spring boot·后端
ajassi200019 分钟前
开源 C# 快速开发(十三)进程--管道通讯
开发语言·开源·c#
茉莉玫瑰花茶22 分钟前
Qt 界面优化 --- 绘图
开发语言·数据库·qt
掘根25 分钟前
【Qt】容器类控件——QTabWidget
开发语言·qt
hqwest30 分钟前
QT肝8天07--连接数据库
开发语言·数据库·c++·qt·sqlite·上位机·qt开发
三次拒绝王俊凯34 分钟前
在ideal中访问页面时出现 HTTP 404 - Not Found
java·学习·tomcat
ClassOps42 分钟前
Android Studio Logcat中 杀死应用
android·android studio·logcat
lagelangri66643 分钟前
MySql的存储过程以及JDBC实战
android·数据库·mysql
指针不南1 小时前
Android Studio | 设置国内代理(SDK 设置国内代理(阿里云镜像))
android·阿里云·android studio
西岭千秋雪_1 小时前
Spring AI alibaba Prompt模板&Advisor自定义
java·人工智能·spring·prompt