如何为mat-table设置多列搜索输入框？

问题说明 #

需要为mat-table添加全局过滤输入框，输入内容需同时匹配name、weight、symbol三列数据，现有代码的过滤逻辑仅针对position和weight，且applyFilter函数未实现正确逻辑。

修改后的完整代码 #

组件类代码 #

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

export interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

@Component({
  selector: 'app-table-filter',
  templateUrl: './table-filter.component.html',
  styleUrls: ['./table-filter.component.css']
})
export class TableFilterComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  ngOnInit() {
    // 自定义过滤规则：匹配name、weight、symbol字段，忽略大小写
    this.dataSource.filterPredicate = (data: PeriodicElement, filter: string) => {
      const filterValue = filter.toLowerCase();
      // 将数值类型的weight转为字符串，支持部分匹配
      return data.name.toLowerCase().includes(filterValue) ||
             data.weight.toString().includes(filterValue) ||
             data.symbol.toLowerCase().includes(filterValue);
    };
  }

  applyFilter(event: Event) {
    // 获取输入值，去除首尾空格并统一转为小写
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    // 设置过滤值，触发过滤逻辑
    this.dataSource.filter = filterValue;
  }
}

HTML模板（保留原代码无需修改） #

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>

关键修改说明 #

• 重写filterPredicate：移除原有的硬匹配逻辑，改为检查name、weight、symbol三个字段，统一转为小写后做包含匹配，支持不区分大小写的部分匹配。
• 完善applyFilter函数：获取输入框的值并处理格式，赋值给dataSource.filter触发过滤。
• 清理冗余代码：删除原ngOnInit中不必要的formControl订阅逻辑，直接使用输入框keyup事件触发过滤。

内容的提问来源于stack exchange，提问作者user17205196