如何在priming的冻结和未冻结列表中设置不同的样式和列宽

Question

我目前正在使用具有冻结列功能的PrimeNG表控件。

一切正常，我能够获得冻结的列，但是现在我想修改我在下面的属性中使用的冻结和未冻结的列样式以及自定义列的宽度。

代码：

MyConnectionString

输出：

通过使用width，我可以实现列的宽度，但是对于前2列，冻结和解冻列表都自动为所有2列采用相同的宽度，因此我想在冻结和解冻列s中分配不同大小的列。

是否可以为冻结和解冻列添加不同的大小？

Answer 1

您只需要pTemplate="frozencolgroup"

<ng-template pTemplate="frozencolgroup" let-columns>
        <colgroup>
            <col style="width:200px">
            <col style="width:50px">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col style="width:100px">
            <col style="width:100px">
            <col style="width:100px">
            <col style="width:100px">
        </colgroup>
    </ng-template>

演示here

更新：使用滚动表可以打破行高。尖端功能下方可解决此问题

makeRowsSameHeight() {
    setTimeout(() => {
      if ($('.ui-table-scrollable-wrapper').length) {
        let wrapper = $('.ui-table-scrollable-wrapper');
        wrapper.each(function () {
          let w = $(this);
          let frozen_rows: any = w.find('.ui-table-frozen-view tr');
          let unfrozen_rows = w.find('.ui-table-unfrozen-view tr');
          for (let i = 0; i < frozen_rows.length; i++) {
            if (frozen_rows.eq(i).height() > unfrozen_rows.eq(i).height()) {
              unfrozen_rows.eq(i).height(frozen_rows.eq(i).height());
            } else if (frozen_rows.eq(i).height() < unfrozen_rows.eq(i).height()) {
              frozen_rows.eq(i).height(unfrozen_rows.eq(i).height());
            }
          }
        });
      }
    });
  }

更新演示：https://stackblitz.com/edit/angular-primeng-table-frozen-columns-dpsm8l