我正在使用垫子桌子。我的工作是加载和修改数据(删除,添加,排序)。我的方法是在标题和第一列上使用mat-menu,但是所有mat-menu按钮都堆叠在一起。我认为这与表格样式有关,但我不确定。
我尝试过使用这种样式,但是在Sass方面我不是专家。
这是我的表格HTML
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- an extra columnm for row editing buttons : required adding a new header -> "actions" -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row; let rIndex = index;">
<button mat-button [matMenuTriggerFor]="menu" yPosition="below">
<mat-icon>arrow_drop_down_circle</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-icon-button matToolTip="Delete Row" matTooltipPosition="above" (click)="deleteRow(rIndex)">
<mat-icon>delete</mat-icon>
<span>Delete Header</span>
</button>
<button mat-icon-button matToolTip="Add Header to the left" matTooltipPosition="above"
(click)="addRowToTheLeft(rIndex)">
<mat-icon>add_circle</mat-icon>
<span>Add Left Header</span>
</button>
<button mat-icon-button matToolTip="Add Header to the left" matTooltipPosition="above"
(click)="addRowToTheRight(rIndex)">
<mat-icon>add_circle</mat-icon>
<span>Add Right Header</span>
</button>
</mat-menu>
<button mat-icon-button matToolTip="Select Row" matTooltipPosition="above" (click)="selectRow(i)">
<mat-icon>check_box_outline_blank</mat-icon>
</button>
</td>
</ng-container>
</table>
这是它的外观图: https://imgur.com/nP6bX5v
预期结果是按钮应该位于彼此下方