10

mat-table是否可以在没有 JQuery 或任何其他附加插件的情况下将浮动水平滚动条添加到Angular 7 中？

我有一个mat-table显示 6 列但也可以通过按一下按钮动态添加 100 多列。
但随后布局中断。

HTML部分：

<button (click)="showLess()" mat-stroked-button class="show-button">Show Less</button>
<button (click)="showMore()" mat-stroked-button class="show-button">Show More</button>

<div class="component data component-card">
<mat-card *ngIf="dataSource?.filteredData" class="mat-card">
    <mat-paginator [length]="length" [pageSize]="100" [pageSizeOptions]="[100, 250, 500, 1000, 2000]" showFirstLastButtons> </mat-paginator>
    <mat-table [dataSource]="dataSource" matSort class="table">
        <ng-container class="container" *ngFor="let displayedColumn of displayedColumns" matColumnDef="{{ displayedColumn }}">
            <mat-header-cell class="header-cell" *matHeaderCellDef >
                <span mat-sort-header class="sort-header">{{ displayedColumn | uppercase }}</span>
                <input class="table-input" matInput (keyup)="applyFilter($event.target.value)" (focus)="setupFilter(displayedColumn)" placeholder="Filter"/>
            </mat-header-cell>
            <mat-cell class="cell" *matCellDef="let item">{{ item[displayedColumn] }}</mat-cell>
        </ng-container>
        <mat-header-row class="header-row" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
        <mat-row class="row" *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</mat-card>

CSS部分：

.data {
    display: block;
    width: 95vw;
    overflow: auto;

    .table {
        width: 100vw;
        max-width: 100%;
        overflow: auto;
        margin-bottom: 10px;
        display: table;
        border-collapse: collapse;
        margin: 0px;
        background-color: rgb(238, 238, 238);
}
    .row,
    .header-row {
        display: table-row;
        min-height: 36px !important;
}
    .cell,
    .header-cell {
        word-wrap: initial;
        display: table-cell;
        padding: 0px 5px;
        line-break: unset;
        width: fit-content;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;
        text-align: center;
}
    .header-row,
    .header-cell {
        margin: 0 auto;
        min-height: 100px !important;
        text-align: center;
        vertical-align: middle;
        align-self: center;
}
    .sort-header {
        display: flex;
        align-content: center;
        text-align: center;
        justify-content: center;
        font-size: 12pt;
}
    .header-cell {
        font-weight: bold;
    }
}

.mat-card {
    min-width: max-content;
    max-width: max-content;
}

如果溢出都处于活动状态，那么我必须向下滚动才能水平滚动，但布局保持原样。只有 mat-table 和它周围的 div 会被滚动，并且 mat-table 上方的元素（搜索字段等）会停留在它们应有的位置。一切都停留在屏幕中间。

如果我从“.data”中的 div 中停用溢出，则会出现正常的浏览器滚动条，我不必再向下滚动了。但是 mat-table 在滚动时将屏幕向右扩展，并且在水平滚动时上面的搜索字段将保留在左侧，这对我来说会破坏布局。

我需要的是两个滚动条的组合，这在我眼中将是一个浮动滚动条。我只会滚动垫表，但其余部分保持原位。

有没有办法用 CSS 或 Angular 原生地实现这一点？

演示： https ://stackblitz.com/edit/angular-elm867?file=src%2Fapp%2Fapp.component.scss

如果您单击“显示更多”，则只需在“.data”中注释“溢出：自动”后滚动时查看按钮的行为方式。

这是有关表格滚动条应如何替换普通滚动条的图像：在此处输入图像描述

4

4 回答 4

17

我希望这将有助于其他人根据单元格内容将水平滚动添加到 mat-table 和列宽。

.mat-table {
      overflow-x: scroll;
    }

.mat-cell,
.mat-header-cell {
    word-wrap: initial;
    display: table-cell;
    padding: 0px 10px;
    line-break: unset;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
.mat-row,
.mat-header-row {
    display: table-row;
}
于 2019-11-20T15:15:23.767 回答
2

我只是添加这个CSS代码：

.mat-table {
    overflow-x: scroll;
}

.mat-row,
.mat-header-row {
    min-width: 800px;
}
于 2021-05-03T09:27:07.080 回答
1

在您现有的 stackblitz中，需要进行更改才能完成此操作...

在 SCSS 中，将类定义为： mat-paginator{width:97vw;}

于 2019-03-25T10:32:49.450 回答
1

添加以下内容以styles.css删除水平滚动条

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

.table如果额外的列溢出，还添加以引入水平滚动。

.mat-card {
    min-width: 100% !important;
    max-width: 100% !important;
}
.table {
  display: block !important;
}

Stackblitz Demo 与动态列添加后调整的表数据


更新 1：

修复了用于固定容器中水平滚动条max-height的容器 div 。.data

.data {
  max-height: 500px;
  overflow: auto;
}

外部容器固定最大高度的演示，用于固定卷轴

于 2019-03-25T11:58:54.207 回答