如何让Angular Material通用表格整行可点击（支持列Key关联）

核心思路 #

基于Angular Material的mat-row绑定点击事件，处理行内交互元素（按钮、开关）的事件冒泡问题；通过列配置中的key属性关联行点击动作，实现灵活的自定义逻辑。

1. 组件类（.ts）修改 #

复用现有onTableActionClick输出事件，添加行点击处理逻辑：

// 行点击处理方法
onRowClick(row: any) {
  // 默认取第一个可显示列的key作为关联标识，也可自定义配置
  const targetKey = this.displayedColumns[0]?.key;
  const actionObj = {
    action: 'rowClick', // 标记为行点击动作
    data: row,
    column: targetKey // 关联的列Key
  };
  this.onTableActionClick.emit(actionObj);
}

2. HTML模板修改 #

给mat-row绑定点击事件，并给行内交互元素添加事件阻止冒泡：

<table class="table table-hover customtable group-table" mat-table [dataSource]="dataSource" matSort matSortDisableClear>

  <!-- 原有列定义 -->
  <ng-container [matColumnDef]="column.key" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!column.isSort" matTooltip='{{column.title}}' disableClear width='{{column.width}}'> {{column.displayName}} </th>
    <td mat-cell *matCellDef="let element" [style.color]="element[column.key]">
      <span *ngIf="!column.type" [innerHTML]="element[column.key]"></span>
      <i *ngIf="column.isInfo && element[column.key]" [matTooltip]="element[column.key]" matTooltipClass="example-tooltip" class="fa fa-info-circle infoIcon"></i>
      <span *ngIf="column.type && column.type!='date' && column.type!='decimal' && column.type!='roundspan' && column.type!='togglespan'" [innerHTML]="element[column.key] | status:column.type "></span>
      <span *ngIf="column.type=='date'" [innerHTML]="element[column.key] | date:'MM/dd/yyyy'"></span>
      <span *ngIf="column.type=='decimal'" [innerHTML]="element[column.key] |number:'2.2-2'"></span>
      <span *ngIf="column.type=='roundspan'" [innerHTML]="element[column.key] |span"></span>
      <!-- 开关添加阻止冒泡 -->
      <span *ngIf="column.type=='togglespan'">
        <mat-slide-toggle 
          [checked]="element[column.key]" 
          [disabled]="!column.permission" 
          (change)="onToggleClick('toggle',element,column); $event.stopPropagation()"
        ></mat-slide-toggle>
      </span>
    </td>
  </ng-container>

  <!-- 操作列定义 -->
  <ng-container matColumnDef="Actions" *ngFor="let column of extraColumns">
    <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="true" matTooltip='{{column.title}}' width='{{column.width}}'>Actions</th>
    <td mat-cell *matCellDef="let row">
      <!-- 操作按钮添加阻止冒泡 -->
      <button *ngFor="let a of actionButton" class="tbactionbtn" 
        (click)='onActionClick(a.key, row); $event.stopPropagation()' 
        title="{{a.displayName}}"
      >
        <i class="{{a.class}}" aria-hidden="true"></i>
      </button>
    </td>
  </ng-container>

  <!-- 修改mat-row绑定点击事件，添加鼠标指针提示 -->
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr 
    mat-row 
    *matRowDef="let row; columns: columnsToDisplay;"
    (click)="onRowClick(row)"
    style="cursor: pointer;"
  ></tr>
</table>

3. 列配置扩展（可选） #

如果需要指定特定列Key关联行点击，可在列配置中添加标记属性：

displayedColumns: Array<any> = [
    { displayName: 'First Name', key: 'firstName', isSort: true, class: '', width: '15%', isRowAssociatedKey: true }, // 标记此列为行点击关联Key
    { displayName: 'Last Name', key: 'lastName', isSort: true, class: '', width: '15%' },
    { displayName: 'Physician Name', key: 'physicianName', isSort: true, class: '', width: '15%' },
    { displayName: 'Gender', key: 'gender', class: '', width: '10%' },
    { displayName: 'MRN', key: 'mrn', class: '', width: '15%' },
    { displayName: 'Age', key: 'age', class: '', width: '10%' },
    { displayName: 'Status', key: 'testApprovedStatus', class: '', width: '15%' },
    { displayName: 'Completed Date', key: 'updatedDate', class: '', width: '10%' },
    { displayName: 'Actions', key: 'Actions', class: '', width: '10%' },
];

同步修改组件类的onRowClick方法：

onRowClick(row: any) {
  // 获取配置的关联列Key
  const associatedColumn = this.displayedColumns.find(col => col.isRowAssociatedKey);
  const targetKey = associatedColumn?.key || this.displayedColumns[0]?.key;
  const actionObj = {
    action: 'rowClick',
    data: row,
    column: targetKey
  };
  this.onTableActionClick.emit(actionObj);
}

4. 父组件处理行点击事件 #

在使用通用表格的父组件中监听事件，处理行点击逻辑：

<app-generic-table
  [inputColumns]="displayedColumns"
  [inputSource]="dataSource"
  (onTableActionClick)="handleTableAction($event)"
></app-generic-table>

handleTableAction(actionObj: any) {
  if (actionObj.action === 'rowClick') {
    console.log('行点击触发，关联列Key:', actionObj.column);
    console.log('行数据:', actionObj.data);
    // 这里添加业务逻辑，比如跳转详情页、打开弹窗等
  }
}

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