ngzorro实现表格的rowspan合并

目标效果：

实现过程：

后端返回的数据格式如下，这种格式如果直接展示并不能实现我们需要的效果，所以需要先将数据格式进行转换。

转换如下：

if (res.status === StatusEnum.SUCCESS) {this.pageList = res.datas;const opreatArry = [];if (this.pageList.length > 0) {this.pageList.forEach(item => {if (item.relations && item.relations.length > 0) {item.relations.forEach((subitem, index) => {let obj: {};obj = JSON.parse(JSON.stringify(item));obj['rowspan'.toString()] = item.relations.length;if (index !== 0) {obj['isshow'.toString()] = false;} else {obj['isshow'.toString()] = true;}obj['relationsId'.toString()] = subitem.id;obj['productName'.toString()] = subitem.productName;obj['select'.toString()] = subitem.select;opreatArry.push(obj);});}});}this.pageListOpreat = opreatArry;console.log(this.pageListOpreat)}

转换结果如下：

最后在页面中实现：

     <nz-tablenzBordered[nzData]="pageListOpreat"[nzFrontPagination]="false"[nzShowPagination]="false"[nzLoadingDelay]="1"><thead><tr><th nzWidth="120px">课程名称</th><th>学院名称</th><th>待选产品</th><th nzWidth="100px">选择方式</th><th nzWidth="80px">选择状态</th><th nzWidth="200px">选择时间</th><th nzWidth="100px">操作</th></tr></thead><tbody><tr *ngFor="let item of pageListOpreat; let i = index;"><ng-container *ngIf="item.isshow"><td [rowSpan]="item.rowspan">{{item.courseName}}</td><td [rowSpan]="item.rowspan">{{item.collegeName}}</td><td>{{item.productName}}</td><td [rowSpan]="item.rowspan">{{item.rowspan}}选{{item.productSelectNumber}} </td><td>{{item.select?'是':'否'}}</td><td [rowSpan]="item.rowspan">{{item.selectTime?item.selectTime:'—'}}</td><td [rowSpan]="item.rowspan"><span *ngIf="item.selectTime">-</span><span *ngIf="!item.selectTime">选择产品</span></td></ng-container><ng-container *ngIf="!item.isshow"><td>{{item.productName}}</td><td>{{item.select?'是':'否'}}</td></ng-container></tr></tbody></nz-table>

记录。

ngzorro实现表格的rowspan合并相关推荐

rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
VXE-TABLE V4 表格表尾合并
关于这个表格表尾合并的方法API <vxe-gridstyle="margin-top: 16px"v-if="columnDrop2Params.isShowVx ...
Element表格之表头合并、行合并和列合并
文章目录一.合并表头二.合并表格行三.合并表格列最近写vue开发项目的时候,很多地方用到了Element组件中的Table 表格.经过一周的边学边做,我总结了以下三种有关表格的合并方法. 一. ...
保姆级教程 | 表格自动行合并实现
在 element-ui 和 antv 中都有表格合并,但如何确定哪几行要合并呢? 在随机给定数据的情况下,如何实现自动合并呢?本文将一一解答这些问题. 并在延伸中,谈到了,如何将本文的方法应用到el ...
java poi生成word 插入表格,图片,自动合并单元格,并且可以在已存在的word上追加
poi版本选3.10以上的要不然插入图片 word会打不开 <dependency><groupId>org.apache.poi</groupId><ar ...
vue复杂表格单元格合并根据数据动态合并
我们在开发中最常见的就是表格,而往往有一些复杂表格都不大好实现,对于合并单元格不是固定的,而是需要根据数据是否相同去动态设置合并的表格,本文把方法分享给大家,可以根据数据动态生成合并单元格,无论导出需 ...
Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧因为要做个网站, ...

ngzorro实现表格的rowspan合并

ngzorro实现表格的rowspan合并相关推荐

最新文章

热门文章