用nz-tabel写一个合并表格

news2025/6/4 1:07:52

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2393664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode hot100刷题日记——29.合并两个有序链表

解答&#xff1a; 方法一&#xff1a;递归 递归的边界条件是啥呢&#xff1f; 递归别想那么多具体步骤&#xff0c;考虑大步骤&#xff0c;小的递归自己会去做的 class Solution { public:ListNode* mergeTwoLists(ListNode* list1, ListNode* list2) {//递归比较大小//先考虑…

【计算机网络】第1章:概述—分组延时、丢失和吞吐量

目录 一、分组延时、丢失 1. 节点处理延时&#xff1a; 2. 排队延时&#xff1a; 3. 传输延时: 4. 传播延时: 5. 节点延时 6. 排队延时 7. 分组丢失 二、吞吐量 三、总结 &#xff08;一&#xff09;分组延时 1. 处理延时&#xff08;Processing Delay&#xff09; …

DeepSeek R1 模型小版本升级,DeepSeek-R1-0528都更新了哪些新特性?

DeepSeek-R1‑0528 技术剖析&#xff1a;思维链再进化&#xff0c;推理性能飙升 目录 版本概览深度思考能力再升级基准测试成绩功能与体验更新API 变动与示例模型开源与下载结语 版本概览 DeepSeek 团队今日发布 DeepSeek‑R1‑0528 —— 基于 DeepSeek V3 Base&#xff08;2…

SQL正则表达式总结

这里写目录标题 一、元字符二、正则表达函数1、 regexp_like(x,pattern[,match_option])2、 regexp_instr(x,pattern[,start[,occurrence[,return_option[, match_option]]]]) 3、 REGEXP_SUBSTR(x,pattern[,start[,occurrence[, match_option]]]) 4、 REGEXP_REPLACE(x,patter…

力扣经典算法篇-13-接雨水(较难,动态规划,加法转减法优化,双指针法)

1、题干 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…

STM32 -- USB虚拟串口通信

本篇操作: 通过CubeMX Keil&#xff0c;配置STM32作为USB设备端&#xff0c;与电脑上位机进行通信&#xff08;CDC&#xff09;&#xff1b;通用带USB功能的 STM32 芯片 &#xff08;如F1、F4等&#xff0c;系统时钟配置不同&#xff0c;代码通用&#xff09;。 目录 一、 S…

uni-app开发特殊社交APP

uni-app开发特殊社交APP 目录 1.展示APP功能 2.展示项目结构 3.关于我的GitHub 引言 博主最近自己在GitHub上面上传了一个关于社交软件的项目&#xff08;该项目早已开发完毕&#xff09;, 这个社交软件比较特殊, 被称之为blind-date&#xff0c; blind-date 是基于 uni-…

Linux中Shell脚本的常用命令

一、设置主机名称 1、通过修改系统文件来修改主机名称 [rootsakura1 桌面]# vim /etc/hostname sakura /etc/hostname&#xff1a;Linux 系统中存储主机名的配置文件。修改完文件后&#xff0c;在当前的shell中是不生效的&#xff0c;需要关闭当前shell后重新开启才能看到效…

RabbitMQ项目实战

先参考文章&#xff1a;&#xff08;必看&#xff09; 06-MQ基础_mq服务-CSDN博客 07-MQ高级&#xff08;幂等性&#xff09;-CSDN博客 https://cloud.iocoder.cn/message-queue/rabbitmq/#_2-0-%E5%BC%95%E5%85%A5%E4%BE%9D%E8%B5%96%E4%B8%8E%E9%85%8D%E7%BD%AE 1、Rabbi…

安卓开发用到的设计模式(3)行为型模式

安卓开发用到的设计模式&#xff08;3&#xff09;行为型模式 文章目录 安卓开发用到的设计模式&#xff08;3&#xff09;行为型模式1. 命令模式&#xff08;Command Pattern&#xff09;2. 策略模式&#xff08;Strategy Pattern&#xff09;3. 观察者模式&#xff08;Observ…

尚硅谷redis7 90-92 redis集群分片之集群扩容

90 redis集群分片之集群扩容 三主三从不够用了&#xff0c;进行扩容变为4主4从 问题&#xff1a;1.新建两个redis实例&#xff0c;怎么加入原有集群&#xff1f;2.原有的槽位分3段&#xff0c;又加进来一个槽位怎么算&#xff1f; 新建6387、6388两个服务实例配置文件新建后启…

离散化算法的二分法应用

我们思考一个问题&#xff1a;其实这里的二分法回归本源也是基于下标映射的原理&#xff0c;只是实现是借助二分的形式。 在排序好的数组中对目标数值进行二分搜索&#xff0c;在 O(logn) 的时间复杂度内找到该数值是整体数据中的第几个。 具体的我们可以如下操作&#xff1a; …

半导体厂房设计建造流程、方案和技术要点-江苏泊苏系统集成有限公司

半导体厂房设计建造流程、方案和技术要点-江苏泊苏系统集成有限公司 半导体厂房的设计建造是一项高度复杂、专业性极强的系统工程&#xff0c;涉及洁净室、微振动控制、电磁屏蔽、特殊气体/化学品管理等关键技术。 一、设计建造流程&#xff1a; 1.需求定义与可行性分析 &a…

一种通用图片红色印章去除的工具设计

朋友今天下午需要处理个事情&#xff0c;问我有没有什么好的办法能够去除&#xff0c;核心问题是要去除图片上的印章。记得以前处理过类似的需求&#xff0c;photoshop操作比较简单&#xff0c;本质是做运算。这种处理方式有很多&#xff0c;比如现在流行的大模型&#xff0c;一…

RapidOCR集成PP-OCRv5_det mobile模型记录

该文章主要摘取记录RapidOCR集成PP-OCRv5_mobile_det记录&#xff0c;涉及模型转换&#xff0c;模型精度测试等步骤。原文请前往官方博客&#xff1a; https://rapidai.github.io/RapidOCRDocs/main/blog/2025/05/26/rapidocr%E9%9B%86%E6%88%90pp-ocrv5_det%E6%A8%A1%E5%9E%8B…

Dify理论+部署+实战

概述 一个功能强大的开源AI应用开发平台&#xff0c;融合后端即服务&#xff08;Backend as Service&#xff09;和LLMOps理念&#xff0c;使开发者能够快速搭建生产级的生成式AI应用。 核心优势 直观的用户界面&#xff1a;提供简洁明了的操作界面&#xff0c;使得用户能够…

内网穿透系列五:自建SSH隧道实现内网穿透与端口转发,Docker快速部署

​以下是对这个自建SSH隧道工具的简单介绍&#xff1a; 一款基于OpenSSH构建的内网穿透与端口转发工具&#xff0c;通过SSH隧道技术实现支持所有TCP协议通信&#xff0c;包括SSH、HTTP、HTTPS等各类应用提供灵活部署方式&#xff0c;特别支持Docker容器化快速部署开源工具地址…

桥梁进行3D建模时的数据采集、存储需求及技术参数

桥梁进行3D建模时的数据采集、存储需求及技术参数 1公里桥梁进行3D建模时的数据采集、存储需求及技术参数的详细分析 1. 照片数量估算 关键影响因素 桥梁类型&#xff1a;梁桥/拱桥/斜拉桥&#xff08;结构复杂度不同&#xff09; 建模精度&#xff1a;工程级&#xff08;1-…

Transformer架构技术学习笔记:从理论到实战的完整解析

引言&#xff1a;重新定义序列建模的里程碑 2017年&#xff0c;Vaswani等人在论文《Attention Is All You Need》中提出的Transformer架构&#xff0c;彻底改变了自然语言处理领域的游戏规则。与传统RNN/LSTM相比&#xff0c;Transformer具有三大革命性特征&#xff1a; 全注意…

1、python代码实现与大模型的问答交互

一、基础知识 1.1导入库 torch 是一个深度学习框架&#xff0c;用于处理张量和神经网络。modelscope是由阿里巴巴达摩院推出的开源模型库。 AutoTokenizer 是ModelScope 库的类&#xff0c;分词器应用场景包括自然语言处理&#xff08;NLP&#xff09;中的文本分类、信息抽取…