PrimeNG 表，如何在表的右侧有一个冻结列？答案

【问题标题】：PrimeNG table, How to have a frozen column at the right of the table?PrimeNG 表，如何在表的右侧有一个冻结列？
【发布时间】：2021-07-29 00:53:10
【问题描述】：

我正在使用 Angular 5.2.5 版和 PrimeNG 6.0.0 版

我想在表格的右侧有一个冻结列。

我尝试改变桌子的方向，这导致了以下问题：

表格左侧的非冻结列
表格右侧的冻结列
常规列和冻结列之间出现垂直滚动条

有没有办法在右侧和表格中有一个冻结列，并在冻结列之后有垂直滚动条？

谢谢 Moshe S.

【问题讨论】：

分享您的研究对每个人都有帮助。告诉我们您尝试了什么以及为什么它不能满足您的需求。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask
@Moshed Shein 你找到解决办法了吗？
@Adnan 不幸的是我没有找到解决方案。

标签： css angular primeng

【解决方案1】：

我也有这个问题，我只是想出了一个简单的 scss 方法

:host ::ng-deep .p-datatable { .p-datatable-scrollable-wrapper { display: flex; flex-direction: row-reverse; .p-datatable-scrollable-view.p-datatable-unfrozen-view { position: initial; }

您将遇到的唯一问题是，您需要在 td 和 th 上设置高度来归档与标准表相同的布局

所以这是将它移到右侧的部分。现在我有一个快速而肮脏的解决方案。更好的选择是通过指令解决它并使用 throttleTime(rxjs 所以将它包装在一个 observable 中) 以获得更好的性能。

为了相处，您需要在<p-table #table> 上使用#table 作为示例来获取表格本身之后，您需要在 .ts 文件中获取它。为此，您实现AfterViewInit 以进行进一步编码。你还需要一个@ViewChild('table') table: Table; 然后你需要像这样使用 ngAfterViewInit：

  ngAfterViewInit(): void {
    (this.table.scrollableViewChild.scrollBodyViewChild.nativeElement as HTMLElement).style.overflowY = 'hidden';
    (this.table.scrollableFrozenViewChild.scrollBodyViewChild.nativeElement as HTMLElement).style.overflowY = 'scroll';
    (this.table.scrollableFrozenViewChild.scrollBodyViewChild.nativeElement as HTMLElement).addEventListener('scroll', ((e) => (this.table.scrollableViewChild.scrollBodyViewChild.nativeElement as HTMLElement).scrollTop = (e.target as HTMLElement).scrollTop));
  }

在这里你也可以更新 freezeTable 的 td 和 th ;) 但正如我所说，请在指令中执行，而不是那样执行 :)

顺便说一下，我对这种错误的格式感到抱歉，我很欣赏更好的格式，谢谢:)

在 PrimeNG V12.0.0 上测试

【讨论】：

【解决方案2】：

这个解决方案对我有用。位置的棒值类似于固定和相对。所以你可以用它来修复水平滚动，但在这种情况下不能垂直滚动。

.p-datatable .p-datatable-scrollable-body td:last-child{
    background: #fff;
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    right: 0;
}

【讨论】：