角度 – primeng turbotable column自动调整滚动

发布时间：2020-12-17 07:06:48 所属栏目：安全来源：网络整理

导读：我正在使用涡轮增压表,并希望以下内容：根据内容自动调整所有列的大小. 让桌子本身水平填满屏幕,例如不要手动指定宽度当自动调整大小的列需要的空间大于表宽度可以提供的空间时,并且无需手动指定任何列宽度以及添加具有列切换的新列时,使表格水平滚动. 从

我正在使用涡轮增压表,并希望以下内容：

>根据内容自动调整所有列的大小.
>让桌子本身水平填满屏幕,例如不要手动指定宽度
>当自动调整大小的列需要的空间大于表宽度可以提供的空间时,并且无需手动指定任何列宽度以及添加具有列切换的新列时,使表格水平滚动.

从我得到的可编辑的例子：

<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px" 
[style]="{'width':'100%'}">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:250px">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

但我不想用

<col *ngFor="let col of columns" style="width:250px">

这是一个plnkr

解决方法

在您的.html文件中使用此代码

<p-table [style]="{'overflow':'auto!important'}"
[columns]="cols"  [value]="Dataset"
[resizableColumns]="true" columnResizeMode="expand" 
[responsive]="true"  [rows]="20"
   [immutable]=false
   [paginator]="true" [rowsPerPageOptions]="[10,15,20,25]">
   <ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn >
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns" class="ui-resizable-column">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
</p-table>

和
添加此css代码bor auto fit并重新密封列
.scss

//table ui
::ng-deep  .ui-table table,.ui-table table
{  table-layout:auto !important;
}
::ng-deep .ui-table-tablewrapper {
    width: auto!important;
}

::ng-deep .ui-table-resizable {
    padding-bottom: 1px;
    /* overflow: auto; */
    width: auto !important;
}
.ui-table .ui-table-tbody > tr,.ui-table .ui-table-thead > tr > th,.ui-table .ui-table-tfoot > tr > td{
    max-width: 300px !important;
    font-size: 12px;
    padding: 0px !important;
    padding-left: 4px !important;
    color: black;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    border-width: 1px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!