如何用Predicate Filter实现Angular Material表格按列过滤？

我明白你现在的需求：原来的mat-table过滤会匹配所有列的数据，但你想让过滤只针对特定的列。别担心，MatTableDataSource的filterPredicate属性就是专门用来解决这个问题的，它允许你完全自定义过滤逻辑，精准控制哪些列参与匹配。

步骤1：自定义过滤规则（Filter Predicate） #

在你的组件类中，给dataSource设置filterPredicate函数，这个函数会决定每一行是否符合过滤条件。比如，如果你只想让过滤在aa和bb这两列中进行，可以这样写：

ngOnInit() {
  this.materialService.getUser().subscribe(value => {
    this.dataSource.data = value;
  });
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;

  // 自定义过滤逻辑：只匹配aa和bb列
  this.dataSource.filterPredicate = (data: MaterialModel, filterValue: string) => {
    // 统一转成小写，实现不区分大小写的匹配
    const trimmedFilter = filterValue.trim().toLowerCase();
    // 检查当前行的aa或bb列是否包含过滤值
    return data.aa.toLowerCase().includes(trimmedFilter) || 
           data.bb.toLowerCase().includes(trimmedFilter);
  };
}

步骤2：保留原有的applyFilter方法 #

你原来的applyFilter方法不需要大改，因为当你设置this.dataSource.filter = filterValue时，会自动触发上面定义的filterPredicate逻辑：

applyFilter(filterValue: string) {
  this.dataSource.filter = filterValue.trim().toLowerCase();
  if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
}

灵活调整过滤范围 #

如果你只想针对单一列过滤（比如只过滤aa列），只需要修改filterPredicate的返回逻辑即可：

return data.aa.toLowerCase().includes(trimmedFilter);

关键说明 #

• filterPredicate是一个回调函数，接收两个参数：当前行的数据对象，以及用户输入的过滤值。
• 返回true表示该行需要保留在表格中，返回false则会被过滤掉。
• 我们统一把过滤值和列数据转成小写，是为了实现不区分大小写的模糊匹配，你可以根据需求去掉这一步。

这样修改后，你的过滤输入框就只会在指定的列中匹配数据，而不会全局搜索所有列了。

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