Primeng Treetable RTL模式下横向滚动表头不跟随问题求助

当给body设置direction: rtl;启用RTL模式后，PrimeNG TreeTable会出现横向滚动时表头无法跟随滚动的问题，以下是几个可行的修复方案：

• 通过JS监听滚动同步表头位置

  1. 给TreeTable添加模板引用变量：

     <p-treeTable #treeTable [value]="yourData">
       <!-- 列配置 -->
     </p-treeTable>
     

  2. 在组件类中添加滚动监听逻辑，同步表头和表体的滚动位置：

     import { ViewChild, AfterViewInit } from '@angular/core';
     import { TreeTable } from 'primeng/treetable';
     
     export class YourComponent implements AfterViewInit {
       @ViewChild('treeTable') treeTable: TreeTable;
     
       ngAfterViewInit() {
         const bodyScroll = this.treeTable.el.nativeElement.querySelector('.p-treetable-tbody-wrapper');
         const headerScroll = this.treeTable.el.nativeElement.querySelector('.p-treetable-thead-wrapper');
         
         bodyScroll.addEventListener('scroll', () => {
           headerScroll.scrollLeft = bodyScroll.scrollLeft;
         });
       }
     }
     

  3. 补充CSS修正RTL下的布局偏移：

     .p-treetable .p-treetable-thead-wrapper,
     .p-treetable .p-treetable-tbody-wrapper {
       direction: rtl;
     }
     .p-treetable .p-treetable-header {
       padding-left: 1rem;
       padding-right: 0;
     }
     

• 自定义滚动容器强制同步
  将TreeTable整体包裹在一个自定义滚动容器内，让表头和表体共享同一个滚动上下文：

  <div class="rtl-treetable-container" style="overflow-x: auto; width: 100%;">
    <p-treeTable [value]="yourData">
      <!-- 列配置 -->
    </p-treeTable>
  </div>
  

  配套CSS：

  .rtl-treetable-container .p-treetable-thead-wrapper {
    overflow-x: visible;
  }
  .rtl-treetable-container .p-treetable {
    min-width: max-content;
  }
  

• 临时修改源码适配RTL（不推荐长期使用）
  若上述方案无效，可临时修改PrimeNG TreeTable的源码逻辑：找到表头滚动同步的相关代码，将scrollLeft的同步逻辑适配RTL方向。注意此方法会影响后续框架升级，仅作为临时应急方案。

内容的提问来源于stack exchange，提问作者Mohamed Sabry Abdelmordy