Angular中点击行时判断列名，控制特定列点击不高亮行

实现思路 #

核心是在点击行时，判断点击事件的目标是否属于需要排除的列，以此决定是否触发行高亮逻辑。有两种常用方式：阻止特定列的事件冒泡 或 在点击事件中判断目标列标识。

方式一：阻止特定列的事件冒泡 #

这种方式最简单直接，在不需要触发行高亮的列上添加事件阻止，让点击事件不传递到父级<tr>元素。

模板代码（HTML）

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3（排除高亮）</th>
      <th>列4</th>
    </tr>
  </thead>
  <tbody>
    <tr 
      *ngFor="let item of dataList" 
      [class.highlight-row]="selectedRowId === item.id"
      (click)="onRowClick(item.id)"
    >
      <td>{{item.col1}}</td>
      <td>{{item.col2}}</td>
      <!-- 点击此列时阻止事件冒泡，不会触发行的点击逻辑 -->
      <td (click)="$event.stopPropagation()">{{item.col3}}</td>
      <td>{{item.col4}}</td>
    </tr>
  </tbody>
</table>

组件逻辑（TS）

import { Component } from '@angular/core';

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html',
  styleUrls: ['./table-demo.component.css']
})
export class TableDemoComponent {
  dataList = [
    { id: 1, col1: '数据1', col2: '内容1', col3: '操作1', col4: '备注1' },
    { id: 2, col1: '数据2', col2: '内容2', col3: '操作2', col4: '备注2' }
  ];
  selectedRowId: number | null = null;

  onRowClick(rowId: number): void {
    // 切换高亮：当前行已选中则取消，否则选中
    this.selectedRowId = this.selectedRowId === rowId ? null : rowId;
  }
}

样式代码（CSS）

.highlight-row {
  background-color: #e8f4fd;
}

方式二：在点击事件中判断目标列标识 #

如果需要更灵活的控制（比如动态配置排除列），可以给列添加自定义属性，在点击行时通过事件目标判断是否属于排除列。

模板代码（HTML）

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3（排除高亮）</th>
      <th>列4</th>
    </tr>
  </thead>
  <tbody>
    <tr 
      *ngFor="let item of dataList" 
      [class.highlight-row]="selectedRowId === item.id"
      (click)="onRowClick($event, item.id)"
    >
      <td data-column="col1">{{item.col1}}</td>
      <td data-column="col2">{{item.col2}}</td>
      <!-- 给排除列添加自定义标识属性 -->
      <td data-column="col3">{{item.col3}}</td>
      <td data-column="col4">{{item.col4}}</td>
    </tr>
  </tbody>
</table>

组件逻辑（TS）

import { Component } from '@angular/core';

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html',
  styleUrls: ['./table-demo.component.css']
})
export class TableDemoComponent {
  dataList = [
    { id: 1, col1: '数据1', col2: '内容1', col3: '操作1', col4: '备注1' },
    { id: 2, col1: '数据2', col2: '内容2', col3: '操作2', col4: '备注2' }
  ];
  selectedRowId: number | null = null;
  // 定义需要排除的列标识
  excludeColumn = 'col3';

  onRowClick(event: MouseEvent, rowId: number): void {
    // 定位到点击的<td>元素
    const targetTd = event.target as HTMLElement;
    const columnId = targetTd.getAttribute('data-column');
    
    // 如果点击的是排除列，直接返回，不触发高亮逻辑
    if (columnId === this.excludeColumn) {
      return;
    }

    // 切换高亮状态
    this.selectedRowId = this.selectedRowId === rowId ? null : rowId;
  }
}

样式代码与方式一一致

注意事项 #

• 如果列内有嵌套元素（比如按钮、图标），方式一中需要给嵌套元素也添加stopPropagation()，避免事件冒泡到行元素。
• 方式二更适合动态列场景，比如列通过循环生成时，可以动态设置排除列的标识。

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