p-table配置双向滚动后横向滚动不生效问题求助

你缺失了2个核心必要配置，补充后即可正常触发横向滚动：

• 关闭自动布局属性autoLayout
  p-table默认autoLayout为true，会自动压缩列宽适配外层容器宽度，哪怕配置了横向滚动规则也不会触发，需要显式设置为false：[autoLayout]="false"
• 为每一列设置固定宽度
  横向滚动触发的前提是所有列的总宽度大于你设置的scrollWidth值，你需要给每一列绑定固定宽度，动态列可以直接复用你已有的templateRows配置，给数组每一项添加width属性后绑定到列上即可，示例列模板代码：

<!-- 表头模板 -->
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" [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.width]="col.width">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>

补充配置后的完整p-table代码：

<p-table
   [columns]="this.templateRows"
   [value]="this.tableData"
   [scrollable]="true"
   scrollHeight="100px"
   scrollWidth="100px"
   scrollDirection="both"
   [autoLayout]="false"
>

注意：需要保证所有列的宽度总和大于你设置的scrollWidth值，比如你设置scrollWidth="100px"，每列宽度设为80px，只要列数≥2，总宽度超过100px就能触发横向滚动。如果配置后仍不生效，可检查是否有全局样式强制修改了表格的table-layout属性为auto，覆盖了组件的默认配置。

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