启用滚动时，primeng table:p-table 行分组宽度不起作用

Question

我正在使用 primeng table with angular.Below 是使用代码 table:

<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>

正如您在上面看到的代码，我想将行组与可滚动 property.On 运行应用程序一起使用我发现宽度不起作用（header 宽度仅起作用). 以下是 UI 在运行上的申请：

如果我从 table 中删除 [scrollable] 属性，那么您可以在下面的屏幕截图中看到宽度有效：

Answer 1

p-table 有 class ui-table 和 css 属性 table-layout: fixed。这是您获得默认结果的资源。

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

Demo

在您正在使用的组件 css 下方放置 p-table,

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

编辑：

如果您的列值超出了列宽，那么为了使列宽打断您的文本，请将 word-break: break-all 分配给 td 个元素。

Demo

Answer 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>

Answer 3

primeng 使用 table display:"block" 风格。将其更改为 table

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

Answer 4

在th和td[中使用[style.flex-basis] =12=]

例如

<th [style.flex-basis]="'5em'">Column 1</th>
<td [style.flex-basis]="'5em'">Value 1</td>

参考：https://github.com/primefaces/primeng/issues/10688#issuecomment-929915095

启用滚动时，primeng table:p-table 行分组宽度不起作用

primeng table:p-table row grouping width not working when scrollable enable

primeng

angular