Angular Material表格单列多值筛选实现（复选框下拉选型）

要实现带复选框的下拉菜单筛选，支持单列多选条件匹配，可按以下步骤操作：

1. 构建筛选模板（表头添加多选复选框下拉） #

给需要筛选的列的表头添加MatSelect（开启多选模式）和MatCheckbox，让用户能直观选择多个筛选条件：

<!-- 示例：为category列添加筛选控件 -->
<ng-container matColumnDef="category">
  <th mat-header-cell *matHeaderCellDef>
    分类
    <mat-select [(value)]="selectedCategories" multiple placeholder="筛选分类" (selectionChange)="onFilterChange()">
      <mat-option *ngFor="let category of allCategories" [value]="category">
        <mat-checkbox [checked]="selectedCategories.includes(category)">{{category}}</mat-checkbox>
      </mat-option>
    </mat-select>
  </th>
  <td mat-cell *matCellDef="let element">{{element.category}}</td>
</ng-container>

2. 组件内初始化变量与数据 #

在组件类中定义筛选相关变量，获取数据源后提取列的唯一选项：

import { MatTableDataSource } from '@angular/material/table';
import { MatSelectChange } from '@angular/material/select';

// 组件类内的变量
selectedCategories: string[] = [];
allCategories: string[] = []; // 存储当前列的所有唯一选项
dataSource = new MatTableDataSource<any>();

ngOnInit() {
  this.getRemoteData();
  // 重写Material数据表的默认筛选行为
  this.dataSource.filterPredicate = this.createFilter();
}

getRemoteData() {
  // 替换为你的实际数据获取逻辑
  this.dataService.fetchData().subscribe(data => {
    this.dataSource.data = data;
    // 提取当前列的所有唯一值，避免重复选项
    this.allCategories = [...new Set(data.map(item => item.category))];
  });
}

3. 自定义筛选逻辑 #

重写filterPredicate方法，实现多条件匹配逻辑：

// Angular Material数据表的自定义筛选方法
createFilter() {
  const filterFunction = (data: any, filter: string): boolean => {
    const searchTerms = JSON.parse(filter);
    
    // 移除未设置筛选条件的列
    Object.keys(searchTerms).forEach(key => {
      if (!searchTerms[key] || searchTerms[key].length === 0) {
        delete searchTerms[key];
      }
    });

    // 无筛选条件时，所有数据都显示
    if (Object.keys(searchTerms).length === 0) {
      return true;
    }

    // 检查每一列的筛选条件：数据的列值需在选中的筛选值数组中
    let isMatch = true;
    for (const col in searchTerms) {
      const filterValues = searchTerms[col];
      if (!filterValues.includes(data[col])) {
        isMatch = false;
        break;
      }
    }
    return isMatch;
  };
  return filterFunction;
}

4. 触发筛选操作 #

当用户选择/取消复选框时，构建筛选对象并触发筛选：

onFilterChange() {
  // 构建筛选对象，可添加多列筛选条件
  const filterObj = {
    category: this.selectedCategories
    // 若需多列筛选，可继续添加其他列，如status: this.selectedStatuses
  };
  // 将筛选对象转为JSON字符串，传给数据源的filter属性
  this.dataSource.filter = JSON.stringify(filterObj);
}

关键说明 #

• 多选逻辑：通过MatSelect的multiple属性实现多选，配合MatCheckbox提升用户选择体验
• 筛选对象：将每列的选中条件以{列名: [选中值数组]}的格式存储，转为JSON字符串后传给数据源
• 自定义筛选：重写filterPredicate解析筛选条件，检查数据是否匹配所有设置的列筛选规则（可根据需求调整为“任意匹配”）

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