如何在Angular Material Table中实现指定列过滤？

刚好之前做过类似的需求，给你调整成只针对指定列过滤的方案，很简单的！核心思路就是把原来遍历所有列的过滤逻辑，改成只检查你指定的字段就行。

步骤1：定义要过滤的目标列 #

首先在组件里声明一个数组，用来存放你想要开启过滤功能的列名，比如我这里选position和name列：

private filterTargetColumns = ['position', 'name'];

之后如果要加其他列，直接把列名加进这个数组就行，非常灵活。

步骤2：自定义过滤逻辑 #

MatTableDataSource允许我们通过filterPredicate自定义过滤规则，我们把它改成只检查指定列的内容：

this.dataSource.filterPredicate = (data: Element, filter: string) => {
  const filterValue = filter.trim().toLowerCase();
  // 遍历指定列，只要有一列匹配就保留该行
  return this.filterTargetColumns.some(column => {
    // 处理数字/字符串类型差异，统一转成字符串匹配
    const cellValue = data[column as keyof Element];
    return cellValue.toString().toLowerCase().includes(filterValue);
  });
};

这里用some方法做判断，只要指定列中有任意一列包含过滤关键词，就会保留这一行数据；如果需要精确匹配（比如完全相等），把includes换成===就行。

完整组件代码示例 #

结合你的ELEMENT_DATA，完整的组件代码如下：

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

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

const ELEMENT_DATA: Element[] = [
  {position: 14598, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 24220, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 39635, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 42027, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 53216, name: 'Boron', weight: 10.811, symbol: 'B'},
  // 剩下的数据...
];

@Component({
  selector: 'app-table-filter',
  templateUrl: './table-filter.component.html',
  styleUrls: ['./table-filter.component.css']
})
export class TableFilterComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  // 这里定义要过滤的列
  private filterTargetColumns = ['position', 'name'];

  constructor() {
    // 初始化自定义过滤规则
    this.dataSource.filterPredicate = (data: Element, filter: string) => {
      const filterValue = filter.trim().toLowerCase();
      return this.filterTargetColumns.some(column => {
        const cellValue = data[column as keyof Element];
        return cellValue.toString().toLowerCase().includes(filterValue);
      });
    };
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

HTML部分保持不变 #

你的过滤输入框和表格结构不用改，还是原来的代码就行：

<mat-form-field appearance="fill">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. 145 or Hydrogen">
</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>
</table>

这样改完之后，你输入过滤关键词的时候，就只会在position和name列里搜索匹配了，weight和symbol列不会被过滤影响。

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