Primeng表响应宽度

Posted 2021-04-03

是否有一种方法可以将响应表中的列设置为成比例的宽度，也就是说，描述列会比日期列宽。还是有一种方法可以使表格根据显示的内容自行设置？我曾考虑过在每一列上设置百分比宽度，但是不确定这是否是最好的方法。

谢谢。

答案

是的，您可以做到！有一个示例项目https://stackblitz.com/edit/angular-primeng-width?file=src/app/app.component.ts

在组件文件中，在列定义中添加width：

 this.columns = [
      { field: 'vin', header: 'Vin', width: '10%' },
      { field: 'year', header: 'Year', width: '20%' },
      { field: 'brand', header: 'Brand', width: '15%' },
      { field: 'color', header: 'Color', width: '5%' }
    ];

在templet文件中，使用[ngStyle] =“ {'width'：col.width}

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
                {{col.header}}
            </th>
        </tr>
    </ng-template>