angular - PrimeNg p-table 列在分组中调整大小不起作用

Question

primeng p-table 可调整大小的列问题

 <p-table [resizableColumns]="true" columnResizeMode="expand" [value]="data" sortMode="multiple" [style]="{width:'100%'}" [scrollable]="true" [scrollHeight]="height" [columns]="columnList" (onColResize)="onBusinessLogicTableColResize($event)">
      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col *ngFor="let col of groupHeaderColSpan" [style.width]="col.width + 'px'">
        </colgroup>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr class="text-center">
          <th *ngFor="let col of columnList" [colSpan]="col.colSpan" [rowSpan]="col.rowSpan" pResizableColumn>
            {{col?.header}}
          </th>
        </tr>
        <tr class="text-center">
          <ng-template ngFor let-col [ngForOf]="columnList">
            <th *ngFor="let subheader of col?.subheaders" [colSpan]="subheader.colSpan" [rowSpan]="subheader.rowSpan">
              {{subheader?.header}}
            </th>
          </ng-template>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-columnValue let-rowIndex="rowIndex" let-columns="columns">
        <ng-template ngFor let-col [ngForOf]="columns">
          <ng-template [ngIf]="col.hasOwnProperty('subheaders')" [ngIfElse]="showData">
            <td class="ui-resizable-column" *ngFor="let sub of col.subheaders" class="text-center">
              {{columnValue[sub.field]}}
            </td>
          </ng-template>
          <ng-template #showData>
            <td class="ui-resizable-column">
              {{columnValue[col.field]}}
            </td>
          </ng-template>
        </ng-template>
        </tr>
      </ng-template>
    </p-table>





    The column list will be like this 
         columnList = [
            {
              header: "header1", field: "header1", subheaders: [
                { header: "subheader1", field: "subheader1" },
                { header: "subheader2", field: "subheader2" }
              ]
            }
          ]


    groupHeaderColSpan = [
    { field: 'subheader1', width: '100', child: 2 }
    ]

我想将可调整大小的列应用到表中，所以我已经应用了它，但由于我增加了特定列的宽度但它增加了另一列的宽度而无法正常工作。

在第二张图片中，我尝试增加 MAT 列的宽度，但它增加了子列的宽度

标签： angularhtml-tableangular6primeng