当前位置：首页 > news >正文

用nz-tabel写一个合并表格

news 来源：原创 2025/5/30 15:37:58

用nz-tabel写一个合并表格

		<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>

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" },],},];

在这里插入图片描述

 	 <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>