7

我想减少我在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表中动态列的宽度？

4

4 回答 4

21

将 TS 文件更新为，传递与动态列标题名称类似的所需宽度值：

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

使用 ngStyle 属性绑定宽度的值：

例如：

<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>
于 2018-06-26T05:34:41.050 回答
2

您可以通过在<p-table>标签中添加 width="100%" 来实现。然后您可以为每个动态列定义宽度百分比。

于 2018-06-25T08:51:22.767 回答
2

如果您使用下面的样式，请添加 colgroup 以定义列的样式。

`     <p-table ...>
        <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width: 40px;">
        </colgroup>
        </ng-template>
       </p-table>`
于 2021-02-02T20:01:06.703 回答
0 
provide style like this 

[ngStyle]="{'width': '100%'}"

for eg
 <th *ngFor="let col of columns" [ngSwitch]="col.name">
        <div *ngIf="col.filterable">
          <div *ngIf="col.datatype == 'string'  || col.datatype == 'float'">
            <input pInputText *ngSwitchCase="col.name" type="text" [ngStyle]="{'width': '100%'}" (keyup.enter)="onFilter($event.target.value, col.dataIndex)" />
          </div>
        </div>
      </th>
于 2019-05-03T14:54:14.503 回答