Angular 6 如何将 PrimeNG 全局过滤器移到 之外？

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" block ，并在 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