[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;
}
}
留言
張貼留言