gpt4 book ai didi

angular - PrimeNG p-dataTable 响应式断点

转载 作者:行者123 更新时间:2023-12-02 17:16:09 24 4
gpt4 key购买 nike

我目前正在为我的 MEAN 应用程序使用 PrimeNG 4.2.0。代码片段如下:

<div class="ui-g-12" *ngIf="orders">
<p-dataTable
[value]="orders"
[responsive]="true"
selectionMode="single"
[(selection)]="selectedOrder"
(onRowDblclick)="onRowSelect($event)"
styleClass="ordersTable"
>
<p-column header="Date" [style]="{'width':'15%'}">
<ng-template let-col let-order="rowData" pTemplate='body'>
<span>{{order.orderDate | date:'shortDate'}}</span>
</ng-template>
</p-column>
<p-column field="orderNumber" header="ID" [style]="{'width':'15%'}" [filter]="true"></p-column>
<p-column field="userId" header="Client ID" [style]="{'width':'20%'}"></p-column>
<p-column header="No. of Products" [style]="{'width':'12%'}">
<ng-template pTemplate="body" let-col let-order="rowData">
<span>{{order.orderDetails.length}}</span>
</ng-template>
</p-column>
...
<p-footer *ngIf="orders">
Total orders: {{orders.length}}
</p-footer>
</p-dataTable>
</div> <!--Orders DATA Ends-->

有没有办法为DataTable的响应设置断点?因为 width: 667(iPhone 6 横向模式)的当前结果非常可怕。 enter image description here

最佳答案

我有一个非常相似的需求,但使用的是表组件 (p-table),我只能通过设置此属性来解决它:[autoLayout]="true"

例子:上一个代码:

<p-table [value]="averbacaoList" selectionMode="single" [rows]="5"  [paginator]="true" [alwaysShowPaginator]="false"
>

带有新属性集的实际代码:

<p-table [value]="averbacaoList" selectionMode="single" [rows]="5"  [paginator]="true" [alwaysShowPaginator]="false"
[autoLayout]="true"
>

关于angular - PrimeNG p-dataTable 响应式断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46250044/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com