在selectionChange mat-select上过滤mat-table数据(级联过滤)

在selectionChange mat-select上过滤mat-table数据(级联过滤)是指在Angular框架中使用Angular Material组件库的mat-select和mat-table组件实现根据选择的条件过滤表格数据的功能。

具体实现步骤如下：

首先，确保已经引入了Angular Material组件库和相关依赖。
在HTML模板中，使用mat-select组件创建一个下拉选择框，并绑定一个选择事件(selectionChange)。

<mat-form-field>
  <mat-label>选择条件</mat-label>
  <mat-select (selectionChange)="filterData($event.value)">
    <mat-option *ngFor="let option of filterOptions" [value]="option.value">
      {{ option.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

在组件的Typescript文件中，定义一个filterOptions数组，用于存储选择条件的选项。

filterOptions = [
  { label: '条件1', value: 'option1' },
  { label: '条件2', value: 'option2' },
  { label: '条件3', value: 'option3' }
];

在组件的Typescript文件中，定义一个filterData方法，用于根据选择的条件过滤表格数据。

filterData(selectedValue: string) {
  // 根据选择的条件过滤表格数据
  this.filteredData = this.tableData.filter(item => item.condition === selectedValue);
}

在HTML模板中，使用mat-table组件显示表格数据。

<table mat-table [dataSource]="filteredData">
  <!-- 表格列定义 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef>列1</th>
    <td mat-cell *matCellDef="let item">{{ item.column1 }}</td>
  </ng-container>
  <!-- 其他列定义 -->
  ...
  <!-- 表格行定义 -->
  <tr mat-row *matRowDef="let item; columns: displayedColumns;"></tr>
</table>

通过以上步骤，就可以实现在selectionChange mat-select上过滤mat-table数据的功能。当选择条件发生变化时，filterData方法会根据选择的条件过滤表格数据，并更新表格显示的数据。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库MySQL、腾讯云对象存储（COS）等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）获取更详细的产品介绍和相关文档。