我正在做一个小型考勤元素,在一些 mat-tab 组件中有一些表格组件。当表格溢出时,它会滚动整个组件,我只希望它在内部组件上滚动表格。
我尝试在这些部分中添加“溢出:自动”:
- 在(app-attendance-table)选择器上
- 内部表格组件
- ::ng-deep { .mat-tab-body { overflow: auto }
- 在(mat-tab-group)选择器上
- 将 (app-attendance-table) 包装在 (ng-container) 或 (div) 中并添加 overflow: auto
这是带标签的外部组件:
<ng-container>
<mat-form-field class="date">
<input
matInput
[matDatepicker]="picker"
placeholder="Select a Date"
(dateInput)="addEvent($event)"
[(ngModel)]="currentDate"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</ng-container>
<mat-tab-group>
<ng-container *ngFor="let grade of result; let i = index">
<mat-tab *ngIf="grade.length > 0" [label]="grades[i]">
<app-attendance-table [dataSource]="grade"></app-attendance-table>
</mat-tab>
</ng-container>
</mat-tab-group>
<div *ngIf="this.result.length < 1 && !this.loading">
No Records Found for The Date: {{ currentDate.toDateString() }}
</div>
<mat-spinner *ngIf="this.loading"> </mat-spinner>
</div>
这是实际的表格组件本身:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Student Name </mat-header-cell>
<mat-cell *matCellDef="let student"
><span
[ngClass]="{
absent: student.isAbsent() && !student.Reason,
finished: student.isAbsent() && student.Reason && !student.editing
}"
>
{{ student.Name }}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="grade">
<mat-header-cell *matHeaderCellDef> Student Grade </mat-header-cell>
<mat-cell
[ngClass]="{
absent: student.isAbsent() && !student.Reason,
finished: student.isAbsent() && student.Reason && !student.editing
}"
*matCellDef="let student"
>
{{ student.Grade }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell
[ngClass]="{
absent: student.isAbsent() && !student.Reason,
finished: student.isAbsent() && student.Reason && !student.editing
}"
*matCellDef="let student"
>
{{ student.Status }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="reason">
<mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
<mat-cell *matCellDef="let student">
<mat-form-field
class="reasons"
*ngIf="!student.isPresent()"
appearance="outline"
>
<mat-select
[(ngModel)]="student.Reason"
[disabled]="!student.editing"
placeholder="Select Reason"
(selectionChange)="makeChange(student)"
>
<mat-option
*ngFor="let reason of reasons; let i = index"
[value]="reason"
[disabled]="student.Reason === reason"
>
{{ reason }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="comments">
<mat-header-cell *matHeaderCellDef> Comments </mat-header-cell>
<mat-cell *matCellDef="let student">
<mat-form-field *ngIf="!student.isPresent()">
<input
matInput
[(ngModel)]="student.Comments"
[disabled]="!student.editing"
(input)="makeChange(student)"
/>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="edit">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let student">
<button
*ngIf="!student.isPresent() && !student.editing"
mat-raised-button
color="primary"
(click)="startEditing(student)"
>
Edit
</button>
<button
*ngIf="!student.isPresent() && student.editing"
mat-raised-button
color="warn"
(click)="saveEdits(student)"
>
Finish
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
最佳答案
为确保表格可滚动,请将表格包裹在 div
中,并使其具有固定高度,并使其 overflow: auto
。
您还可以检查下面的链接,这些链接的页面和表格都是可滚动的。
- https://angular-qfqpwr.stackblitz.io (工作 Stackblitz)
- https://material.angular.io/components/table/examples (带有粘性标题的表格)
关于html - Mat-tab 内的组件 : How to scroll inner component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56419378/