angular7+antdesgin 动态合并行_angular表格实现表格汇总,table表格实现动态合并行-优快云博客

博客给出HTML中表格td合并的代码，定义两个函数分别控制合并与不渲染多余数据。提到Angular7和Ant Design使用表格时的问题，需获取后台JSON数据，通过getArr()方法得到数组，数组中数字代表合并行数，位置代表开始合并处，代码待完善。

废话不多说，直接上代码

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

代码还存在一点问题，后期再完善