Question

我正在使用新的PrimengV7 p表，我想导出该表，

所以我的代码是

<p-header>
        <div class="pull-right" *ngIf="collapsed">

            <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
        </div>
    </p-header>
<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
    (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                    [responsive]="true" scrollable="true" scrollHeight="400px">
                    <ng-template pTemplate="header">
                            <tr>
                                    <th style="width: 100px"></th>
                                    <th style="width: 100px">{{columns['so']}}</th>
                                    <th style="width: 100px">{{columns['sourceLineNumber']}}</th>
                                    <th style="width: 100px">{{columns['bookingEntityName']}}</th>
                              </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                            <tr [pSelectableRow]="rowData">
                                    <td style="width: 100px">
                                        <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                        </span>
                                    </td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.so}}">{{rmanReconSosrcToBkingsRep.so}}</td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.sourceLineNumber}}">{{rmanReconSosrcToBkingsRep.sourceLineNumber}}</td>

                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.bookingEntityName}}">{{rmanReconSosrcToBkingsRep.bookingEntityName}}</td>

                             </tr>
                    </ng-template>

即使我尝试将图标放在表中，也无法正常工作在鞋底显示错误

试用2：带有动态列

<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
        (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                        [responsive]="true" scrollable="true" scrollHeight="400px">
                        <ng-template pTemplate="header">
                                <tr>
                                        <th style="width: 100px"></th>
                                        <th *ngFor="let col of columnOptions">
                                                {{col.label}}
                                        </th>
                                     </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                                <tr [pSelectableRow]="rowData">
                                        <td style="width: 100px">
                                            <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                            </span>
                                        </td>

                                                <td *ngFor="let col of columnOptions">
                                                        {{rowData[col.value]}}
                                                    </td>

                                 </tr>
                        </ng-template>

即使它不起作用

请任何人帮助我

谢谢。

Answer 1

如果要在表中导出数据，则应使用数据表的导出功能。而且使用此功能绝对简单易行。您应该遵循2个步骤。首先，您应该在p-table标签上添加模板变量。如下所示：

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple" 
     [(selection)]="selectedCars">

在上一行中，dt是模板变量。

第二步是制作按钮并只调用一个函数。但请注意，请勿更改函数名称以触发导出函数：

   <button type="button" pButton icon="fa fa-file-o" iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>

exportCSV（）是开始导出到CSV文件的功能。但是您的代码是错误的，因为您在标记的p表之前使用了该函数，这是错误的。该函数必须在p-table标签内。不在那之外。

Answer 2

请将 [columns]="cols" 添加到 <p-table> 并尝试：

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple"[(selection)]="selectedCars" [exportFilename]="exportName">

primeng p表exportCSV（）函数不起作用？

2 个答案: