在分组中调整PrimeNg p表列的大小不起作用

时间:2018-12-21 11:24:20

标签: angular html-table angular6 primeng

  

primng p表可调整大小的列问题

 <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 }
    ]
  

我想将可调整大小的列应用于表,所以我已经应用了   但随着我增加特定内容的宽度而无法正常工作   列,但会增加另一列的宽度。

The table will look like this

enter image description here

  

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

0 个答案:

没有答案