[Angular Material] 讓matTable可以一行顯示多列

 


 <table mat-table [dataSource]="dataSourceSeal" matSort>
          <!-- businessType Column -->
          <ng-container matColumnDef="businessType">
            <th mat-header-cell *matHeaderCellDef>業務別</th>
            <td
              mat-cell
              *matCellDef="let element; let i = index"
              [attr.rowspan]="getRowSpan('businessType', i)"
              [style.display]="getRowSpan('businessType', i) ? i : ''"
            >
              {{ element.businessType }}
            </td>
          </ng-container>



 ngOnInit() {
   
    // 設定分隔表格
    this.cacheSpan('businessType', d => d.businessType);
    this.cacheSpan('cusName', d => d.businessType + d.cusName);
    this.cacheSpan('custype', d => d.businessType + d.cusName + d.custype);

 
  }



 getRowSpan(col, index) {
    return this.spans[index] && this.spans[index][col];
  }






 cacheSpan(key, accessor) {
    const DATA = this.selectionSeal.selected;

    for (let i = 0; i < DATA.length; ) {
      let currentValue = accessor(DATA[i]);
      let count = 1;

      // Iterate through the remaining rows to see how many match
      // the current value as retrieved through the accessor.
      for (let j = i + 1; j < DATA.length; j++) {
        if (currentValue !== accessor(DATA[j])) {
          break;
        }

        count++;
      }

      if (!this.spans[i]) {
        this.spans[i] = {};
      }

      // Store the number of similar values that were found (the span)
      // and skip i to the next unique row.
      this.spans[i][key] = count;
      i += count;
    }
  }






留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

[Angular Materail] 檔案上傳範例

[Angular Material] 搜尋式下拉選單範例