可滚动表上的 PrimeNG p 表列宽度

Question

我有一个 p 表定义为[scrollable]="true"

<p-table
  *ngIf="!loading"
  [value]="data"
  [resizableColumns]="true"
  [reorderableColumns]="true"
  [columns]="columns"
  [autoLayout]="true" <---
  [scrollable]="true" <---
  scrollHeight="75vh"
>

会将[scrollable]表布局从 更改display: table-cell为display:flex，因此[autoLayout]现在会忽略 。

我尝试将此处的样式设置为百分比宽度（即10%/10%/80%），但它对flex显示表格没有影响。

      <th
        *ngFor="let col of columns"
        pSortableColumn="{{ col.field }}"
        pReorderableColumn
        pResizableColumn
        [ngStyle]="{'width': col.width}" <---
      >

我看到有一个 PrimeNG 问题对此进行了评论，但是在使用时是否可以使用任何解决方法来获取设置的列宽度[scrollable]？

https://github.com/primefaces/primeng/issues/5510#issuecomment-432155295

Answer 1

尝试以下操作：

<!-- File: employee-grid.component.html -->
<p-table #dt id='employees-grid' [value]='employees' [responsive]='true'
        scrollHeight='420px' [scrollable]='true'
        [(selection)]='selectedEmployee' selectionMode='single'
        (onRowSelect)='onRowSelect($event)' dataKey='EmployeeId'>
    <ng-template pTemplate='caption'>
        <div class='nsg-row nsg-text-center'>
            <h5 class='nsg-primary-color'>Employee Selection</h5>
        </div>
    </ng-template>
    <ng-template pTemplate='header'>
        <tr>
            <th style='flex: 0 0 320px;'>
                Name
                <p-columnFilter type='text' field='EmployeeName' matchMode='contains' display='menu'></p-columnFilter>
            </th>
            <th style='flex: 0 0 160px;'>
                Company
                <p-columnFilter type='text' field='CompanyShortName' display='menu'></p-columnFilter>
            </th>
            <th>
                Div/Depart
                <p-columnFilter type='text' field='DeptDivShortName' display='menu'></p-columnFilter>
            </th>
            <th>
                Job Title
                <p-columnFilter type='text' field='JobTitle' display='menu'></p-columnFilter>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate='body' let-rowData let-idx='rowIndex'>
        <tr [pSelectableRow]='rowData' [pSelectableRowDisabled]='!editable' [ngClass]="{'nsg-state-highlight' : idx === selectedRowIdx}">
            <td style='flex: 0 0 320px;'>
                <span class='p-column-title'>Name</span>
                {{rowData.EmployeeName}}
            </td>
            <td style='flex: 0 0 160px;'>
                <span class='p-column-title'>Company</span>
                {{rowData.CompanyShortName}}
            </td>
            <td>
                <span class='p-column-title'>Division/Depart</span>
                {{rowData.DeptDivShortName}}
            </td>
            <td>
                <span class='p-column-title'>Job Title</span>
                {{rowData.JobTitle}}
            </td>
        </tr>
    </ng-template>
</p-table>
<!-- End of employee.grid.component.html -->

另请查看Primefaces 论坛以获取解决方案，但通常 Stack Overflow 是最好的来源。