我想在列标题上有一个筛选器按钮,以便可以通过单击复选框以及多列筛选来筛选结果。
这是我尝试过的方法,按钮会加载菜单,但是单击时也会启动排序,并且定位不正确:
<table mat-table [dataSource]="source" matSort (contextmenu)="onContextMenu($event)"
matRipple [matRippleRadius]="'15'"
[matRippleColor]="'#03a9f4'">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name <button mat-button matSuffix mat-icon-button aria-label="Clear" [matMenuTriggerFor]="menu">
<mat-icon>filter_list</mat-icon>
</button>
<mat-menu #menu>
<ng-template matMenuContent>
<div *ngFor="let item of items">
<mat-checkbox class="mat-menu-item">{{item.name}}</mat-checkbox>
</div>
</ng-template>
</mat-menu>
</th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Email Column -->
<ng-container matColumnDef="emailAddress">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email Address </th>
<td mat-cell *matCellDef="let row"> {{row.emailAddress}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>
<mat-paginator [length]="source.length" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
以下是我想要的示例:
答案 0 :(得分:0)
您是否尝试过将点击事件添加到过滤器按钮以防止排序?
(click)="foo($event)"
foo($event: Event) {
$event.stopPropagation();
}