primeng 表根据用户选择保留列宽答案

【问题标题】：primeng table preserve columns widths based on user selectionprimeng 表根据用户选择保留列宽
【发布时间】：2020-03-04 16:57:41
【问题描述】：

我对 primeNG 表有疑问。表格有很多列，在列切换时，列宽正在变化，表格看起来很乱。

表格可滚动和调整大小，因此根据文档，由于技术原因不支持自动布局。

所以也许有一些解决方法，或者当用户手动更改列大小时，是否有办法保留列大小。任何帮助或想法.. 请参阅 stackblitz 项目以进行复制

https://stackblitz.com/edit/angular-primeng-width-rjgg7f?file=src/app/app.component.ts

    <p-table #dt [columns]="selectedColumns" [value]="carsData" [paginator]="true" [rows]="10"[scrollable]="true" scrollHeight="200px" [resizableColumns]="true">
        <ng-template pTemplate="caption">

            <div style="text-align:left">
                <p-multiSelect [options]="columns" [(ngModel)]="selectedColumns" optionLabel="header"
                    selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}"
                    defaultLabel="Choose Columns"></p-multiSelect>
            </div>

        </ng-template>
  <ng-template pTemplate="colgroup" let-columns>
                <colgroup>
                    <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
                </colgroup>
            </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
         <th rowspan="2" style="width:10%;text-align: center" pResizableColumn>
            </th>
                <th *ngFor="let col of columns" pResizableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns" >
            <tr>
        <td (click)="onRowSelectAction(rowData)">
                <div id="btnwrap" style="width:100%">
                    <p-menu #menu [popup]="true" [model]="items" appendTo="body"></p-menu>
                    <button type="button" pButton icon="pi pi-ellipsis-h"
                        style="margin-left:2px;margin-top:2px;text-align: center" [label]="additionalButtonTitle"
                        (click)="menu.toggle($event)" class="btn btn-dark">
                    </button>

                </div>
            </td>
                <td *ngFor="let col of columns" class="ui-resizable-column" class="ui-resizable-column">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

我看不到这个问题，它对我来说工作正常。请检查。

查看更新后的图像，列宽仅为 5 列，而显示为 6 列。

【讨论】：

看看最后一列它的超宽，如果有更多的数据，它看起来并不好
您的this.columns 总宽度也超过 100%。总宽度应为 100%。

【解决方案2】：

我发现了问题，它是包含操作按钮的第一列。我在 pTemplate="header" 中设置了列样式，但它需要在 pTemplate="colgroup" 中设置

更新了 pTemplate="colgroup"

 <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
               <col style="width:4%;text-align: center">
               <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
     </colgroup>
   </ng-template>

更新了 pTemplate="header"

<ng-template pTemplate="header" let-columns>
            <tr>
         <th rowspan="2" pResizableColumn>
            </th>
                <th *ngFor="let col of columns" pResizableColumn>
                    {{col.header}}
                </th>
            </tr>
    </ng-template>

【讨论】：