角度材料表filterPredicate

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface UserData {
  name: string;
  age: number;
  city: string;
}

@Component({
  selector: 'app-user-table',
  template: `
    <table mat-table [dataSource]="dataSource">
      <!-- 表格列定义 -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let user"> {{user.name}} </td>
      </ng-container>

      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef> Age </th>
        <td mat-cell *matCellDef="let user"> {{user.age}} </td>
      </ng-container>

      <ng-container matColumnDef="city">
        <th mat-header-cell *matHeaderCellDef> City </th>
        <td mat-cell *matCellDef="let user"> {{user.city}} </td>
      </ng-container>

      <!-- 表格行定义 -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  `,
})
export class UserTableComponent {
  displayedColumns: string[] = ['name', 'age', 'city'];
  dataSource = new MatTableDataSource<UserData>([
    { name: 'John Doe', age: 30, city: 'New York' },
    { name: 'Jane Smith', age: 25, city: 'London' },
    { name: 'Bob Johnson', age: 35, city: 'Paris' },
  ]);

  constructor() {
    // 设置过滤函数
    this.dataSource.filterPredicate = this.customFilterPredicate;
  }

  // 自定义过滤函数
  customFilterPredicate(data: UserData, filter: string): boolean {
    // 根据条件过滤数据
    return data.name.toLowerCase().includes(filter.toLowerCase()) ||
           data.city.toLowerCase().includes(filter.toLowerCase());
  }
}