表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~

表格页面文件.html

<h1>正常表格</h1>
<nz-table #colSpanTable [nzData]="table03" nzBordered>
<tbody>
<tr *ngFor="let item of table03; index as i">
<td>{{item.Project01}}</td>
<td>{{item.Project02}}</td>
<td>{{item.Project03}}</td>
<td>{{item.Project04}}</td>
<td>{{item.Project05}}</td>
</tr> </tbody>
</nz-table> <hr>
<br> <h1>经过合并的表格</h1>
<h3>
注意1: [nzData]="table01"必须为数组类型!!!!否则会报错core.js:6157 ERROR TypeError: object is not iterable (cannot read property
Symbol(Symbol.iterator))
</h3>
<h3>
注意2:&lt; th [colspan]="tableCol" &gt;是这样子写
</h3>
<h3>
注意3:&lt; td [attr.colspan]="tableCol" &gt;是这样子写
以上两者写法不一致,写的不对会失效
</h3>
<nz-table #colSpanTable [nzData]="table01" nzBordered>
<thead>
<tr>
<th [colspan]="table01[0].arr.length + tableCol">{{table01[0].title}}</th>
</tr>
<tr>
<th [colspan]="tableCol">Project</th>
<th *ngFor="let item of table01[0].arr; index as i">{{item}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of table01[0].data; index as i">
<td [attr.colspan]="tableCol">{{ item.ttt }}</td>
<td *ngFor="let innerItem of item.Content;">{{innerItem.abc}}</td>
</tr>
<tr *ngFor="let item of table02; index as i">
<ng-container *ngFor="let t of mergeColumns;">
<ng-container *ngIf="item[t]!==undefined">
<td [attr.rowspan]="item[mergeFix+t]">{{ item[t] }}</td>
</ng-container>
</ng-container>
<td *ngFor="let name of notMergeColumns">{{item[name]}}</td>
</tr>
</tbody>
</nz-table>

表格页面文件.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { tableData1,tableData2 } from './mock.js'
@Component({
selector: 'app-aa',
templateUrl: './AA.component.html',
styleUrls: ['./AA.component.less']
})
export class AAAAAComponent implements OnInit {
tableCol = 3
table01:Object
table02:Array<Object>
table03:Array<Object>
tableData:any;
mergeFix = 'mergeFlag'
mergeColumns = ['Project01','Project02']; // 合并列的键值
notMergeColumns = ['Project03','Project04','Project05','Project06','Project07']; // 合并列的键值
ngOnInit(): void {
this.table01=tableData1
this.table02=this.sortAndMerge(tableData2);
this.table03=tableData2
}
private sortAndMerge(rawDataList): any[] {
const rowspan =this.mergeFix, mergeColumns = this.mergeColumns;
if (rawDataList.length > 1) {//长度大于1才有资格进一步处理
const sortColumn = Object.keys(rawDataList[0]),
keySort = raw => {
for (let i = raw.length - 1; i > 0; i--) {
let newObj = {}, tmpObj = raw[i];
sortColumn.forEach(s => newObj[s] = tmpObj[s]);
raw[i] = newObj;
}
return raw;
}, compare = (a, b, c = sortColumn[0], i = 0) => {
if (a[c] === b[c]) { //等于的话进行判断是否还有后续字段需要排序,没有则返回0;有则递归进行后续字段排序处理。
if (i === sortColumn.length - 1) {//没有后续字段
return i = 0;
}
i++;
return compare(a, b, sortColumn[i], i);//递归排序后续字段
} else if (a[c] > b[c]) { //大于返回1
return 1;
} else { //小于返回-1
return -1;
}
}, arr = keySort(JSON.parse(JSON.stringify(rawDataList))).sort(compare), aLen = arr.length;
for (let i = mergeColumns.length - 1; i >= 0; i--) {//先迭代待合并列
let index = 0;
let title = mergeColumns[i];
let span = 1;//合并列属性默认为1
for (let j = 0; j < aLen; j++) {
let comp = arr[index][title];
if (arr[j][title] === comp) {
j !== index && (delete arr[j][title], span++);
console.log(rowspan)
j === aLen - 1 && (arr[index][rowspan + title] = span);
} else {
span > 1 && (arr[index][rowspan + title] = span, span = 1);
index = j;
}
}
}
return arr
}
return rawDataList;
} }

数据文件mock.js



const tableData1 = [{
title: '合并类型格式',
arr: ['AAAAA', 'BBBBB', 'CCCCCC', 'DDDDD'],
data: [
{
ttt: 'title01',
Content: [
{
abc: 'ASWD01'
},
{
abc: 'ASWD02'
},
{
abc: 'ASWD03'
},
{
abc: 'ASWD04'
},
],
},
{
ttt: 'title02',
LeaderOrder: 1,
Content: [
{
abc: 'ASWD01'
},
{
abc: 'ASWD02'
},
{
abc: 'ASWD03'
},
{
abc: 'ASWD04'
},
],
},
],
}];
const tableData2 = [
{
key: '1',
Project01: 'Project01_01',
Project02: 'PPPPPPPP0101',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '2',
Project01: 'Project01_01',
Project02: 'PPPPPPPP0101',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '3',
Project01: 'Project01_01',
Project02: 'Project02_02',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '4',
Project01: 'Project01_01',
Project02: 'Project02_02',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '5',
Project01: 'Project01_01',
Project02: 'Project02_02',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
] export { tableData1, tableData2 };

ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用的更多相关文章

  1. element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式

    element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式 本文重点写 element-u ...

  2. NG-ZORRO + angular-cli11 表格横纵向单元格合并,按需设置背景色,解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题,也适用VUE,REACT

    NG-ZORRO + angular-cli11 实现表格横纵向单元格合并,按需设置背景色,并解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题 HTML代码 <!-- 1. ...

  3. Android实现先横向横线展现在纵向拉开图片

    前段时间产品那边让我做一个动画,要求是先以横线的方式横向展开,在纵向展示图片,最后展示几秒动画在原路返回,随后我在网上查找资料,发现这方面的记录很少,最后自己写了一个 后期还会慢慢改进: 转载请说明出 ...

  4. HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  5. 如何让elemengUI中的表格组件相同内容的单元格自动合并

    1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...

  6. element ui表格相同内容自动合并

    一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...

  7. poi生成表格自动合并单元格

    直接复制这个工具类即可使用: /** * 合并单元格 * @author tongyao * @param sheet sheet页 * @param titleColumn 标题占用行 * @par ...

  8. 图片合并成PDF,两个PDF的合并

    需求: 将多张手机照片合并成一个PDF,并于另一个成型PDF合并 过程: 使用全能扫描王处理一遍,拆剪掉多余部分,并提高亮度增加文字对比度 合并: 使用Faststone Capture合并图片即可. ...

  9. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

随机推荐

  1. 探究Presto SQL引擎(4)-统计计数

    作者:vivo互联网用户运营开发团队 -  Shuai Guangying 本篇文章介绍了统计计数的基本原理以及Presto的实现思路,精确统计和近似统计的细节及各种优缺点,并给出了统计计数在具体业务 ...

  2. CH58X服务修改

    在对ble系列应用时,很多时候拿手机充当主机.在使用ble 调试助手时常会用到write.read.notify等功能.有时可能会根据自己的需求对这些服务进行修改.下图是官方例程体现出的service ...

  3. Codeforces Round #805 (Div. 3)E.Split Into Two Sets

    题目链接:https://codeforces.ml/contest/1702/problem/E 题目大意: 每张牌上面有两个数字,现在有n张牌(n为偶数),问能否将这n张牌分成两堆,使得每堆牌中的 ...

  4. C语言指针重点

    指针 指针与一维数组 万能公式 p[i] = *(p+i) = (i+p) = i[p] &p[i] == &((p+i))== p+i 指针与二维数组 二维数组万能公式: ((p+i ...

  5. Inventor 2021保姆级安装教程

    Inventor 2021 WIN10 64位安装步骤: 1.先使用"百度网盘客户端"下载INT21_CN_x64安装包到电脑磁盘里,并鼠标右击进行解压缩,安装前先断网,然后找到I ...

  6. Go语言核心36讲47

    你好,我是郝林,今天我们继续分享使用os包中的API. 我们在上一篇文章中.从"os.File类型都实现了哪些io包中的接口"这一问题出发,介绍了一系列的相关内容.今天我们继续围绕 ...

  7. xshell登陆,查看中文日志出现乱码

    看到乱码,首先想到的是编码问题 linux默认编码格式是utf-8,windows默认gbk [root@backup]# echo $LANGen.US.UTF-8 使用fie命令可以查看到文件信息 ...

  8. SpringBoot使用@Async的总结!

    一些业务场景我们需要使用多线程异步执行任务,加快任务执行速度. 之前有写过一篇文章叫做: 异步编程利器:CompletableFuture 在实际工作中也更加推荐使用CompletableFuture ...

  9. 2流高手速成记(之九):基于SpringCloudGateway实现服务网关功能

    咱们接上回 上一节我们基于Sentinel实现了微服务体系下的限流和熔断,使得整个微服务架构的安全性和稳定性上升了一个台阶 篇尾我们引出了一个问题,众多的微服务节点,我们如何部署才能满足客户端简洁高效 ...

  10. 在CentOS编译Git源码

    Git 是一个免费的开源分布式版本控制系统,旨在处理从小到小到的所有内容 具有速度和效率的超大型项目. Git易于学习,占用空间很小,性能快如闪电. 它超越了Subversion,CVS,Perfor ...