primeng table:p-table 行分组宽度在可滚动启用时不起作用答案

【问题标题】：primeng table:p-table row grouping width not working when scrollable enableprimeng table:p-table 行分组宽度在可滚动启用时不起作用
【发布时间】：2019-12-16 15:11:35
【问题描述】：

我正在使用带角度的primeng表。下面是使用表的代码：

<p-table [value]="cars" dataKey="brand" [scrollable]="'true'" scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th style="width:50px">Vin</th>
            <th style="width:50px"> Year</th>
            <th style="width:100px"> Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template  pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata2[rowData.brand].index === rowIndex">
            <td colspan="4">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.brand}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
</p-table>

正如您在上面的代码中看到的，我想使用具有可滚动属性的行组。在运行应用程序时，我发现宽度不起作用（仅标题宽度起作用）。下面是运行应用程序的 UI：

如果我从表中删除 [scrollable] 属性，则宽度可以在下面的屏幕截图中看到：

【问题讨论】：

你能提供stackblitz吗？
stackblitz.com/edit/primeng-table-scroll-rnhmug?file=src/app/…
是的，如果记录更多，我需要滚动
滚动条应该在哪里？整张桌子还是只扩大区域？
我需要整个表，因为用户可以展开所有行来查看数据

标签： angular primeng

【解决方案1】：

p-table 具有类 ui-table，它作为 css 属性 table-layout: fixed。这是您获得默认结果的 reseon。

要根据您的宽度获得结果，您需要拥有table-layout: auto。

Demo

在你正在使用的组件的css下面放p-table，

p-table::ng-deep .ui-table table {
  table-layout: auto !important;
}

编辑：

如果您的列值超过列宽，则为使列宽中断您的文本，请将 word-break: break-all 分配给 td 元素。

Demo

【讨论】：

发现上述解决方案的一个问题，如果任何字段值很大，则不保持单元格宽度。有关问题，请参见以下链接：stackblitz.com/edit/primeng-table-scroll-srbohh?file=src/app/…
实际上真正的问题是尺寸。如果您需要列的大小，那么我认为您应该使用自动换行 css 属性设置列。
试过 css text-overflow: ellipsis;溢出：隐藏； white-space: nowrap;但这没有影响。如果我删除了 table-layout: auto !important;然后就可以了
只需添加word-break: break-all; 即可解决问题。 stackblitz.com/edit/primeng-table-scroll-aerpzj。更新了答案。希望这可以帮助。在此之后，您可能需要调整文本填充或文本大小。
是的，它解决了。我想展示......使用css（文本溢出：省略号；溢出：隐藏；空白：nowrap；）这样行高不会影响。但上面的css不适用于表格布局：auto

【解决方案2】：

我能够通过使用 colgroup(with columnresizable) 来解决这个问题。下面是我的最终代码。

<p-table [resizableColumns]="'false'" *ngIf="groupKey" class="png-table" [value]="data" [dataKey]="groupKey" scrollHeight="500px"
[scrollable]="'true'" [columns]="cols">
<ng-template pTemplate="colgroup" let-columns>
    <colgroup>
        <ng-container *ngFor="let col of columns">
            <col *ngIf="!col.hide" [style.width.px]="col.width">
        </ng-container>

    </colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
    <tr>
        <ng-container *ngFor="let col of columns">
            <th [pSortableColumn]="col.field" *ngIf="!col.hide" pResizableColumn pReorderableColumn [class]="col.filter?'sortable':'non-sortable'">
                {{col.headerName}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </ng-container>
    </tr>
    <!-- <tr class="filter-row">
        <th *ngFor="let col of columns" [hidden]="col.hide">
            <input class="filter-input" *ngIf="col.filter" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
        </th>
    </tr> -->
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
    <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData[groupKey]].index === rowIndex">
        <td colspan="7">
            <a href="#" [pRowToggler]="rowData">
                <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                <span>{{rowData[groupKey]}}</span>
            </a>
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex" let-columns="columns">
    <tr>
        <ng-container *ngFor="let col of columns" [ngSwitch]="col.type">
            <td classs="ui-resizable-column" *ngSwitchCase="'del'" [ngStyle]="getHeaderStyle(col)">
                <i class="fa fa-close delete-icon g-act-icon" (click)='deleteRow()'></i>
            </td>
            <td classs="ui-resizable-column" *ngSwitchCase="'edit'" [ngStyle]="getHeaderStyle(col)">
                <i class="fa fa-edit edit-icon g-act-icon" (click)='deleteRow()'></i>
            </td>
            <td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='type'" [ngStyle]="getHeaderStyle(col)">
                {{rowData[col.field]}}
            </td>
            <td classs="ui-resizable-column" [pEditableColumn] *ngSwitchCase="'cep'" [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <p-inputMask (keyup)="onEnterCEP()" mask="aaaaaa-999-999"></p-inputMask>

                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td classs="ui-resizable-column" [hidden]="col.hide" *ngSwitchCase="'cb'" [ngStyle]="getHeaderStyle(col)">
                {{rowData[col.field]}}
            </td>
            <td classs="ui-resizable-column" [pEditableColumn] *ngIf="!col.hide && col.type=='act'" [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='com'" [pEditableColumn] [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td classs="ui-resizable-column" [pEditableColumn] *ngIf="!col.hide && col.type=='tsk'" [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='sco'" [pEditableColumn] [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td classs="ui-resizable-column" [pEditableColumn] *ngIf="!col.hide && col.type=='hrs'" [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td  classs="ui-resizable-column" *ngIf="!col.hide && col.type=='des'" [pEditableColumn] [ngStyle]="getHeaderStyle(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>

        </ng-container>
    </tr>
</ng-template>

【讨论】：

【解决方案3】：

primeng 使用 table display:"block" 样式。将其更改为表格

 .p-datatable table {
   display: table !important;
 }

【讨论】：