Angular Material mat-table如何在表头与表体间插入带筛选输入框的自定义行

完全可以实现你要的效果，不过直接写裸<tr>和<td>容易和mat-table的自动列宽、对齐逻辑不兼容出现错位问题，推荐用适配mat-table规则的方案实现，具体如下：

第一步：TS文件补充配置 #

先加一个筛选行的标识判断函数，以及筛选参数对象：

// 原有展示列定义
displayedColumns: string[] = ['id', 'name', 'createTime', 'operation'];
// 筛选参数，和列一一对应，用来对接后端查询
filterParams: Record<string, string> = {
  id: '',
  name: '',
  createTime: ''
};

// 筛选行匹配规则
isFilterRow = (index: number, rowData: any) => rowData === 'filter-row';

第二步：HTML列定义补充筛选单元格 #

每个列的ng-container里新增一个用于筛选行的单元格：

<mat-table [dataSource]="dataSource">
  <!-- 示例：ID列定义 -->
  <ng-container matColumnDef="id">
    <!-- 原有普通表头单元格 -->
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <!-- 新增筛选行的单元格 -->
    <th mat-header-cell *matHeaderCellDef="let row; when: isFilterRow">
      <input matInput placeholder="筛选ID" [(ngModel)]="filterParams.id" (input)="loadServerData()">
    </th>
    <!-- 原有表体单元格 -->
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- 其余列按照上面的格式依次补充筛选单元格即可 -->

  <!-- 原有普通表头行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!-- 新增的筛选行，插入在表头和表体中间 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns; when: isFilterRow" class="filter-row"></tr>
  <!-- 原有表体行 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

可选样式调整 #

如果需要区分筛选行样式，直接给对应的tr加自定义类修改即可：

.filter-row {
  background-color: #f5f5f5;
}
.filter-row input {
  max-width: 100%;
  font-size: 14px;
}

你可以直接在输入框的事件回调里调用后端查询接口，完全不需要用到mat-table自带的前端筛选能力，完全符合你的需求。

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