angular - 可以在可排序的 primeng 表中更改列的宽度吗？

Question

我想减少我在 primeng 网格中使用的几列的宽度。 然而，根据我的理解，我们只能更改使用“p-column”或“th”标签创建的列的宽度。

以下 PFA 代码片段:HTML:

 <th *ngFor="let col of columns" [pSortableColumn]="col.field"colspan="col.colspan" style="text-align: 
center;">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>

还有 TS:

this.cols = [
                { field: 'first', header:'FIRST'},
                { field: 'second', header: 'SECOND'},
                { field: 'third', header: 'THIRD'},
                { field: 'fourth', header: 'FOURTH'},
                { field: 'fifth', header: 'FIFTH'},
                { field: 'sixth', header: 'SIXTH'}
            ];

我们如何更改可排序 primeng 表中动态列的宽度？

Answer 1

更新 TS 文件，传递与动态列标题名称相似的所需宽度值:

this.cols = [
{field: 'first', header: 'FIRST', width: '20%'},
{field: 'second', header: 'SECOND', width: '30%'},
{field: 'third', header: 'SECOND', width: '50%'}]

使用ngStyle属性绑定(bind)width的值:

例如:

<th *ngFor="let col of columns" [pSortableColumn]="col.field" colspan="col.colspan" 
       [ngStyle]="{'width': col.width}">
                {{col.header}}
       <p-sortIcon [field]="col.field"></p-sortIcon>
</th>