PrimeNG p-table列宽调整功能失效问题求助

以下是针对PrimeNG表格列宽调整失效问题的排查与修复步骤：

1. 禁用autoLayout属性 #

表格设置的[autoLayout]="true"会让PrimeNG自动计算分配列宽，直接覆盖手动调整的列宽配置，必须将其移除或设为false：

<p-table #dt [columns]="headers" [value]="DocumentList" [paginator]="true" [rows]="rowSize" [pageLinks]="5"
          (sortFunction)="customSort($event)" [customSort]="true" [alwaysShowPaginator]=true exportFilename="ListDocs"
          [responsive]="true" [(first)]="first" [showCurrentPageReport]="true"
          currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
          [rowsPerPageOptions]="[5,10,15,25,50]" [resizableColumns]=true responsiveLayout="scroll"
          selectionMode="multiple" [(selection)]="selectedItems">

2. 确认导入ResizableColumnModule #

在对应模块文件（如app.module.ts）中必须导入PrimeNG的列调整模块，否则pResizableColumn指令无法生效：

import { ResizableColumnModule } from 'primeng/resizablecolumn';

@NgModule({
  imports: [
    // 其他模块导入
    ResizableColumnModule
  ]
})
export class YourModule { }

3. 修复模板变量绑定错误 #

body模板定义的变量是let-documentList，但内部使用的是rowData，会导致数据绑定异常（虽不直接影响列调整，但会破坏表格基础功能）：

<ng-template pTemplate="body" let-rowData>
<tr>
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td [style]="{minWidth: '150px'}"><a id="docNum"
                  style="cursor: pointer;" (click)="openDocNumPopup(docNumPopup);Data(rowData)">{{rowData.DOC_GRP_NUM}}
</a>
</td>
</tr>
</ng-template>

4. 移除冲突的内联样式 #

部分<th>标签上的border-bottom: none !important等强制样式可能遮挡列调整手柄，建议移除或调整这类覆盖PrimeNG默认样式的代码。

验证操作 #

修改完成后刷新页面，将鼠标悬停在列标题边缘，出现调整手柄后即可拖动调整列宽。

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