当列在Mat-Table中有href/click事件时,如何防止行扩展?
在Mat-Table中,如果某一列包含了href或click事件,点击该列时会触发事件并导致行扩展。如果想要防止行扩展,可以通过以下两种方法实现:
<mat-table>
<ng-container matColumnDef="columnWithEvent">
<mat-header-cell *matHeaderCellDef> Column with Event </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="handleClick($event)">
<a href="#" (click)="handleLinkClick($event)">{{element.columnWithEvent}}</a>
</mat-cell>
</ng-container>
</mat-table>
...
handleLinkClick(event: Event) {
event.stopPropagation();
// 处理链接点击事件
}
handleClick(event: Event) {
event.stopPropagation();
// 处理其他点击事件
}
.mat-cell.columnWithEvent {
cursor: default;
}
以上两种方法都可以有效地防止行扩展,具体选择哪种方法取决于具体需求和实现方式。
希望以上回答能够满足您的需求,如果还有其他问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云