在Angular的mat-table中按行分组可以通过以下步骤实现:
data: any[] = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Jane', age: 30, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' },
{ name: 'Alice', age: 28, city: 'Tokyo' },
{ name: 'Mike', age: 32, city: 'Sydney' }
];
<table mat-table [dataSource]="data">
<!-- 列定义 -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef>Age</th>
<td mat-cell *matCellDef="let element">{{ element.age }}</td>
</ng-container>
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef>City</th>
<td mat-cell *matCellDef="let element">{{ element.city }}</td>
</ng-container>
<!-- 行定义 -->
<tr mat-header-row *matHeaderRowDef="['name', 'age', 'city']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'age', 'city']"></tr>
</table>
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'group'
})
export class GroupPipe implements PipeTransform {
transform(data: any[], property: string): any[] {
const groups = {};
data.forEach(item => {
const group = item[property];
groups[group] = groups[group] || [];
groups[group].push(item);
});
return Object.keys(groups).map(group => ({ group, items: groups[group] }));
}
}
<table mat-table [dataSource]="data | group:'city'">
<!-- 列定义 -->
<ng-container matColumnDef="group">
<th mat-header-cell *matHeaderCellDef>Group</th>
<td mat-cell *matCellDef="let element">{{ element.group }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef>Age</th>
<td mat-cell *matCellDef="let element">{{ element.age }}</td>
</ng-container>
<!-- 行定义 -->
<tr mat-header-row *matHeaderRowDef="['group', 'name', 'age']"></tr>
<tr mat-row *matRowDef="let row; columns: ['group', 'name', 'age']"></tr>
</table>
通过以上步骤,你可以在Angular的mat-table中按行分组数据。在这个例子中,我们按照城市(city)属性进行分组,并在表格中显示分组的名称和对应的数据项。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云