Angular 6 如何将 PrimeNG 全局过滤器移到 <p-table> 之外？

Question

设计师的 UI 模拟要求我将全局搜索过滤器移到 p 表之外，但我不确定如何执行此操作，或者是否可能？有没有人有做类似事情的经验？我可以严格使用 CSS 样式来做到这一点，同时为不同的屏幕尺寸保持响应式布局吗？

<p-table #dt [value]="tags" [paginator]="true" [rows]="25" [columns]="cols" [resizableColumns]="true" [globalFilterFields]="['vendor']">
  <ng-template pTemplate="caption">
    <div style="text-align: right; overflow-x: hidden;">
      <p class="wrapper"><input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></p>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th class="{{col.class}}" *ngFor="let col of columns" [pSortableColumn]="col.field">
        <p-sortIcon [field]="col.field" *ngIf="col.field == 'fieldThree' || col.field == 'fieldOne' || col.field == 'fieldTwo' "></p-sortIcon>
        {{col.header}}
        <fa *ngIf="col.field == 'fieldThree' || col.field == 'fieldTwo'" name="info-circle" pTooltip="{{col.tooltip}}" tooltipPosition="right" showDelay="1000" hideDelay="500"></fa>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="cols">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of cols" [ngClass]="{'toggle-tag': col.field==''}">
        <div *ngIf="col.field == 'fieldThree'; then vendorRow"></div>
        <div *ngIf="col.field == 'fieldTwo' || col.field == 'domain' || col.field == 'fieldThree'; then default"></div>
        <ng-template #vendorRow><a (click)="showVendorDetails(rowData)">{{rowData[col.field]}}</a></ng-template>
        <ng-template #default>{{rowData[col.field]}}</ng-template>
      </td>
    </tr>
  </ng-template>
</p-table>

Answer 1

是的，这是可能的。只需删除 p-table 内的 ng-template pTemplate="caption" 块并在 p-table 之外具有完全相同的输入字段（如下所示）

<input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" 
 (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">

这与p-table 内部的工作方式完全相同。然后，您可以在其上放置任何 CSS（以使其具有响应性和全部）。保持剩余的p-table 代码不变。

关注Official docs