小编suc*_*erp的帖子

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

我有一个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">{{ …

我正在使用 Angular Material 来可视化来自 SQL Server 数据库的数据。垫表是根据我返回的列和条目的数量动态创建的。可以有 40、50+ 列和 100k+ 个条目。

我选择只显示少数列，并通过显示更多按钮显示所有列。分页器默认将行数限制为 100，但最多可以显示 2.000。

虽然它在 Firefox 和 Chrome 上运行相当流畅，但排序 100k+ 行或一次渲染 1.000 或 2.000 行可能需要一些时间，但在 IE11 上的性能非常糟糕。即使只显示标准的 100 个条目和少数行也需要一些时间，切换到所有列和/或更多行是非常缓慢的，并且 IE 会完全冻结。

我做了一个简单的演示来展示它是如何工作的。垫子桌子就像我用的一样。

你知道有什么方法可以提高 IE11 的性能吗？

演示