【问题标题】:AutoLayout not working in PrimeNG TurboTable自动布局在 PrimeNG TurboTable 中不起作用
【发布时间】:2018-09-21 14:25:09
【问题描述】:

我无法在 PrimeNG 的新 TurboTable 中使用 autoLayout。无论内容和浏览器宽度如何,所有列的宽度都相同。

我试过[autoLayout]="true"autoLayout="true"。两者都不起作用。

我正在使用最新的 PrimeNG 版本 (5.2.4)

这是我的html:

<p-card>
    <p-header>
        <div style="padding: 15px; padding-bottom: 0px">
            <button pButton
                    type="button"
                    label="Add New"
                    class="ui-button-info"
                    icon="fa-plus"
                    [routerLink]="['/users/edit', 0]"></button>
        </div>
    </p-header>
    <p-table [columns]="cols"
             [value]="users"
             [autoLayout]="true"
             [(selection)]="selectedUser"
             selectionMode="single"
             [style]="{'height':'600px'}"
             [scrollable]="true"
             scrollHeight="580px"
             [rows]="20"
             (onRowSelect)="handleOnUsersRowSelect($event)">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns" style="text-align: center">
                    {{col.field == 'isActive' ? (rowData[col.field] ? 'Yes' : 'No'): rowData[col.field] }}
                </td>
            </tr>
        </ng-template>
    </p-table>
</p-card>

【问题讨论】:

  • 如果表格设置为可滚动,似乎会出现问题。如果设置为使用页面,则自动布局有效
  • 我有同样的问题,目前我没有找到解决方案。我可以从第一条评论中确认行为。
  • @makkasi 我最终选择了页面而不是自动滚动,因为自动布局在该模式下工作。自 OP 以来,我也没有再尝试过,也没有升级到最新版本的 primeng​​span>

标签: angular primeng primeng-turbotable


【解决方案1】:

出于技术原因,scrollableresizable 属性与 autoLayout 属性不兼容。

PrimeNg 网站对此进行了记录。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-28
    • 2018-07-03
    • 2014-11-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多