p-table部分行合并

json格式:

    this.cars = [
      {
        brand: "Audi",
        vin: "aaa",
        year: "1970",
        color: "Black"
      },
      {
        brand: "Audi",
        vin: "aab",
        year: "1970",
        color: "Black"
      },
      {
        brand: "Audi",
        vin: "aac",
        year: "1978",
        color: "Black"
      }
    ]

.html:

   <p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()">
        <ng-template pTemplate="header">
            <tr>
                <th>Brand</th>
                <th>Vin</th>
                <th>Year</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr>
                <td *ngIf="rowBrandGroup[rowData.brand].index === rowIndex" [attr.rowspan]="rowBrandGroup[rowData.brand].size">
                    {{rowData.brand}}
                </td>
                <td>{{rowData.vin}}</td>
                <td *ngIf="rowYearGroup[rowData.year].index === rowIndex" [attr.rowspan]="rowYearGroup[rowData.year].size">
                    {{rowData.year}}</td>
                <td>{{rowData.color}}</td>
            </tr>
        </ng-template>
    </p-table> 

.ts:

cars: any;
rowBrandGroup: any;
rowYearGroup : any;

 onSort() {
    this.BrandRowGroupData();
    this.YearRowGroupData();
  }
  
  BrandRowGroupData() {
    this.rowBrandGroup = {};
    if (this.cars) {
      for (let i = 0; i < this.cars.length; i++) {
        let rowData = this.cars[i];
        let brand = rowData.brand;
        if (i == 0) {
          this.rowBrandGroup[brand] = { index: 0, size: 1 };
        }
        else {
          let previousRowData = this.cars[i - 1];
          let previousRowGroup = previousRowData.brand;
          if (brand === previousRowGroup)
            this.rowBrandGroup[brand].size++;
          else
            this.rowBrandGroup[brand] = { index: i, size: 1 };
        }
      }
    }
  }

  YearRowGroupData() {
    this.rowYearGroup = {};
    if (this.cars) {
      for (let i = 0; i < this.cars.length; i++) {
        let rowData = this.cars[i];
        let year = rowData.year;
        if (i == 0) {
          this.rowYearGroup[year] = { index: 0, size: 1 };
        }
        else {
          let previousRowData = this.cars[i - 1];
          let previousRowGroup = previousRowData.year;
          if (year === previousRowGroup)
            this.rowYearGroup[year].size++;
          else
            this.rowYearGroup[year] = { index: i, size: 1 };
        }
      }
    }
  }

效果图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值