在PrimeNG表格中使用多选过滤器,可以通过以下步骤实现:
import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { FilterService } from 'primeng/api';
filterOptions: SelectItem[];
constructor(private filterService: FilterService) {
this.filterOptions = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
];
}
filter
属性来指定过滤器类型为多选:<p-table [value]="yourData" [rows]="10">
<ng-template pTemplate="header">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<th>
<p-multiSelect [options]="filterOptions" (onChange)="filterService.onFilter($event.target.value, 'column1', 'in')"></p-multiSelect>
</th>
<th>
<p-multiSelect [options]="filterOptions" (onChange)="filterService.onFilter($event.target.value, 'column2', 'in')"></p-multiSelect>
</th>
<th>
<p-multiSelect [options]="filterOptions" (onChange)="filterService.onFilter($event.target.value, 'column3', 'in')"></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr>
<td>{{rowData.column1}}</td>
<td>{{rowData.column2}}</td>
<td>{{rowData.column3}}</td>
</tr>
</ng-template>
</p-table>
在上述代码中,filterOptions
变量存储了过滤器选项,通过p-multiSelect
组件来实现多选过滤器。在每个过滤器的onChange
事件中,调用filterService.onFilter
方法来应用过滤器。
领取专属 10元无门槛券
手把手带您无忧上云