废话不多说,直接上代码
<tbody>
<tr *ngFor="let data of editRowTable.data;index as i ">
<td>
<ng-container>
{{ data.id }}
</ng-container>
</td>
<td>
<ng-container>
{{ data.postname}}
</ng-container>
</td>
<td [attr.rowspan]="renderContent(data.id-1)" *ngIf="show(data.id-1)">
<ng-container>
{{ data.rankname}}
</ng-container>
</td>
<td [attr.rowspan]="renderContent(data.id-1)" *ngIf="show(data.id-1)">
<ng-container *ngIf=" !editCache[data.id].edit; else rankscoreInputTpl ">
{{ data.rankscore }}
</ng-container>
<ng-template #rankscoreInputTpl>
<input type="text " nz-input [(ngModel)]="editCache[data.id].data.rankscore " />
</ng-template>
</td>
<td>
<ng-container *ngIf="!editCache[data.id].edit; else rankruleInputTpl ">
{{ data.rankrule}}
</ng-container>
<ng-template #rankruleInputTpl>
<input type="text " nz-input [(ngModel)]="editCache[data.id].data.rankrule " />
</ng-template>
</td>
<td>
<div class="editable-row-operations ">
<ng-container *ngIf="!editCache[data.id].edit; else saveTpl ">
<a (click)="startEdit(data.id) ">编辑</a>
</ng-container>
<ng-template #saveTpl>
<a (click)="saveEdit(data.id) ">保存</a>
<a nz-popconfirm nzTitle="Sure to cancel? " (nzOnConfirm)="cancelEdit(data.id) ">取消</a>
</ng-template>
</div>
<div class="dele ">
<a nz-popconfirm nzTitle="确定删除么? " (nzOnConfirm)="deleteRow(data.id) ">删除</a>
</div>
</td>
</tr>
</tbody>
这是html 在需要合并的td上定义两个函数,一个控制合并,一个控制不渲染多余数据,玩过angular7都知道,这东西和antdesgin在使用表格的时候有多坑,下面是函数的方法:
首先你得先获取从后台来的json数据
this.listData当做参数传递
ngOnInit() {
this.getArr(this.listData);
}
通过getArr()方法可以得到一个数组;形式大概这样[3,0,0,5,0,0,0,0,2,0,0];
3,5,2代表合并的行数,他们在数组中的位置代表时候开始合并,不合并的位置都为0
// 因为级别数,分数行数相同,可以用一个方法实现合并行
arrData:any[]=[];
getArr(value) {
var arr = new Array(value.length);
var x = "";
var count = 0;
var startIndex = 0;
for (let i = 0; i < value.length; i++) {
var val = value[i].rankname;
if (i == 0) {
x = val;
count = 1;
arr[0] = 1;
} else {
if (val == x) {
count++;
arr[startIndex] = count;
arr[i] = 0
} else {
count = 1;
x = val;
startIndex = i;
arr[i] = 1
}
}
}
this.arrData = arr;
}
// 控制合并行
renderContent(inb) {
if (this.arrData[inb] !== 0 ) {
return this.arrData[inb];
}
}
// 去除多余数据
show(inb) {
if (this.arrData[inb] != 0) {
return true;
} else {
return false;
}
}
代码还存在一点问题,后期再完善