Angular Material Table问题咨询：移除阴影与添加键盘快捷键

我来帮你解决这两个实际开发中常见的Angular Material Table问题：

1. 移除表格周围的阴影 #

你遇到的CSS无效问题，大概率是Angular视图封装限制或者阴影来源并非mat-table本身导致的，给你两个可行方案：

• 方案一：先确认阴影来源
  很多时候表格会嵌套在mat-card或其他容器组件里，阴影其实是外层容器的，而非mat-table自带的。打开浏览器开发者工具（F12），定位阴影对应的DOM元素，确认归属。如果是mat-card的阴影，直接给mat-card添加样式即可：

  mat-card {
    box-shadow: none !important;
  }
  

• 方案二：突破视图封装（阴影确实来自mat-table）
  Angular组件的样式默认是封装在组件内部的，直接写mat-table的样式可能无法穿透到Material的内置组件结构。可以用两种方式解决：

  1. 全局样式文件配置：在项目根目录的styles.css/styles.scss中添加样式，全局样式优先级更高，无需额外修饰：

     mat-table {
       box-shadow: none !important;
       transition: none !important;
     }
     

  2. 组件内使用::ng-deep穿透：在组件的CSS文件中用::ng-deep突破封装（虽然Angular官方不推荐，但处理第三方组件样式时非常实用）：

     ::ng-deep mat-table {
       box-shadow: none !important;
       transition: none !important;
     }
     

2. 实现箭头键切换行 + Shift键多选功能 #

Angular Material Table没有内置这个快捷键功能，需要手动实现，核心思路是让行元素可聚焦、监听键盘事件、结合SelectionModel管理选中状态，具体步骤如下：

第一步：初始化数据与选中状态管理 #

在组件类中引入SelectionModel，用来统一管理行的选中状态：

import { SelectionModel } from '@angular/cdk/collections';
import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

// 定义表格数据类型
export interface TableData {
  id: number;
  name: string;
  value: string;
}

// 模拟数据
const TABLE_DATA: TableData[] = [
  { id: 1, name: 'Item 1', value: 'Value 1' },
  { id: 2, name: 'Item 2', value: 'Value 2' },
  { id: 3, name: 'Item 3', value: 'Value 3' },
];

@Component({
  selector: 'app-custom-table',
  templateUrl: './custom-table.component.html',
  styleUrls: ['./custom-table.component.css'],
})
export class CustomTableComponent {
  displayedColumns: string[] = ['select', 'name', 'value'];
  dataSource = TABLE_DATA;
  // 初始化SelectionModel，允许多选
  selection = new SelectionModel<TableData>(true, []);
  // 获取所有行元素的引用
  @ViewChildren('tableRow') tableRows!: QueryList<ElementRef>;
  // 跟踪当前聚焦的行索引
  currentFocusIndex = 0;

  ngAfterViewInit() {
    // 页面初始化时让第一行获得焦点
    this.tableRows.first.nativeElement.focus();
  }
}

第二步：模板中配置行的可聚焦与事件绑定 #

在表格模板里，给每一行添加tabindex、键盘事件监听，以及选中/聚焦状态的样式绑定：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 选择列 -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox 
        (change)="$event ? toggleAllRows() : null"
        [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let element">
      <mat-checkbox 
        (click)="$event.stopPropagation()"
        (change)="$event ? selection.toggle(element) : null"
        [checked]="selection.isSelected(element)">
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- 名称列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 值列 -->
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{element.value}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!-- 核心配置：行元素的聚焦、键盘事件、样式绑定 -->
  <tr 
    mat-row 
    #tableRow
    (keydown)="handleKeyPress($event, index)"
    [tabindex]="0"
    [class.selected]="selection.isSelected(element)"
    [class.focused]="index === currentFocusIndex"
    *matRowDef="let element; let index = index;"
    (click)="updateFocusIndex(index)">
  </tr>
</table>

第三步：实现键盘事件处理逻辑 #

在组件类中添加键盘事件处理方法，处理箭头键切换和Shift键多选逻辑：

handleKeyPress(event: KeyboardEvent, currentIndex: number) {
  const totalRows = this.dataSource.length;
  if (!totalRows) return;

  // 阻止默认行为，避免页面滚动
  event.preventDefault();

  switch (event.key) {
    case 'ArrowDown':
      this.navigateBetweenRows(currentIndex + 1, event.shiftKey);
      break;
    case 'ArrowUp':
      this.navigateBetweenRows(currentIndex - 1, event.shiftKey);
      break;
    default:
      return;
  }
}

navigateBetweenRows(newIndex: number, isShiftPressed: boolean) {
  // 边界判断，防止索引越界
  if (newIndex < 0 || newIndex >= this.dataSource.length) return;

  if (isShiftPressed) {
    // Shift键按下时，选中当前行到目标行的所有行
    const start = Math.min(this.currentFocusIndex, newIndex);
    const end = Math.max(this.currentFocusIndex, newIndex);
    this.selection.clear();
    for (let i = start; i <= end; i++) {
      this.selection.select(this.dataSource[i]);
    }
  } else {
    // 非Shift键，只选中目标行
    this.selection.clear();
    this.selection.select(this.dataSource[newIndex]);
  }

  // 更新聚焦索引并让目标行获得焦点
  this.currentFocusIndex = newIndex;
  this.tableRows.toArray()[newIndex].nativeElement.focus();
}

updateFocusIndex(index: number) {
  // 点击行时更新聚焦索引
  this.currentFocusIndex = index;
}

// 全选/取消全选逻辑（可选）
isAllSelected() {
  const selectedCount = this.selection.selected.length;
  const totalCount = this.dataSource.length;
  return selectedCount === totalCount;
}

toggleAllRows() {
  this.isAllSelected() ? this.selection.clear() : this.dataSource.forEach(row => this.selection.select(row));
}

第四步：添加选中与聚焦的样式 #

在组件CSS中添加样式，让选中和聚焦的行更直观：

.mat-row.selected {
  background-color: rgba(63, 81, 181, 0.1);
}

.mat-row.focused {
  outline: 2px solid rgba(63, 81, 181, 0.5);
  outline-offset: -2px;
}

这样就能完美实现箭头键切换行、Shift+箭头键连续选中行的功能了。

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