Primeng-lts 11.4.10表格列resize失效及滚动表格报错求助

针对你遇到的问题，在Primeng 11.x LTS版本中，滚动表格（scrollable=true）+可调整列（resizableColumns=true） 的组合必须通过<colgroup>来同步表头与表体的列宽，否则会触发报错；同时单独开启resizableColumns不生效，是因为旧版本需要显式在表头列上添加pResizableColumn指令。

解决方案步骤： #

1. 调整columns数组结构（若原数组为纯字符串），改为包含字段名、表头名、初始宽度的对象格式，方便统一控制列宽：

// 示例：替换原columns数组
columns = [
  { field: 'col1', header: '列1', width: '120px' },
  { field: 'col2', header: '列2', width: '150px' },
  // 其他列按此格式扩展
];

2. 在<p-table>内部添加<colgroup>，遍历columns生成对应<col>标签绑定初始宽度；
3. 在表头的<th>上添加pResizableColumn指令，并绑定对应列宽。

修改后的完整HTML代码： #

<div class="table-container" style="overflow-x: auto; overflow-y: hidden;">
    <p-table *ngIf="chart_toggle" 
             [columns]="columns" 
             [value]="tableData" 
             [tableStyle]="{ 'width': '80%', 'min-width': '100rem','font-size': '0.9rem','color': '@foreground'}"
             styleClass="p-datatable-gridlines" 
             [resizableColumns]="true" 
             [scrollable]="true" 
             scrollHeight="550px">
        <!-- 新增colgroup同步表头与表体列宽 -->
        <colgroup>
            <col *ngFor="let col of columns" [style.width]="col.width">
        </colgroup>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" pResizableColumn [style.width]="col.width">
                    {{ col.header }}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns" style="white-space: nowrap;">
                    {{ rowData[col.field] }}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

关键说明： #

• <colgroup>是滚动表格支持列宽调整的必要条件，它能保证表头和滚动表体的列宽始终同步；
• pResizableColumn指令必须显式添加到<th>上，旧版本的resizableColumns仅作为全局开关，无法单独触发列调整功能；
• 若不想修改columns数组结构，也可在colgroup和th中直接使用固定宽度或auto，但对象格式更便于后续维护。

内容的提问来源于stack exchange，提问作者Naxi