Question

我想要一个带有水平和垂直滚动条的表。当我们不在桌子上使用rtl方向时，primeNg中的展示会正常工作！

当我们使用水平滚动并且rtl方向滚动不会在表格标题上滚动时！在rtl dir

中使用时，表头是固定的

mycode：

 <div dir="rtl">
  <p-table  dir="rtl" #dt
           [columns]="cols"
           [value]="cars"
           [paginator]="true"
           [rows]="10"
           [scrollable]="true"
           scrollHeight="200px"
            [style]="{width:'1000px'}">

    <!-- below for fixining columns withs-->
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" style="width:150px;">
      </colgroup>
    </ng-template>

    <ng-template pTemplate="header"  let-columns>
      <tr dir="rtl" class="ui-rtl">
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>

    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
      </tr>
    </ng-template>
  </p-table>

</div>

Answer 1

PrimeNG不支持表组件的RTL。

因此，解决方法是侦听正文上的滚动事件，并将相同的精确移位分配给标题：

scrollableTableBodyScroll: () => void;  

constructor(
  private el: ElementRef,
  private zone: NgZone,
) { }
    
ngAfterViewInit(): void {
    const scrollableTableHeader: HTMLElement = this.el.nativeElement.querySelector('.ui-table-scrollable-header');
    const scrollableTableBody: HTMLElement = this.el.nativeElement.querySelector('.ui-table-scrollable-body');
    this.zone.runOutsideAngular(() => {
        this.scrollableTableBodyScroll =  this.renderer.listen(scrollableTableBody, 'scroll', () => {
          scrollableTableHeader.scrollLeft = scrollableTableBody.scrollLeft;
        });
    });
}

ngOnDestroy(): void {
    this.scrollableTableBodyScroll();
}

使用NgZone

的原因

可滚动和rtl在primeNG表中不起作用

1 个答案: