Angular中Mat-Table如何将指定数据行滚动到视图中？

当然可以实现！我之前做项目的时候也碰到过类似需求，下面给你详细拆解两种常用的滚动到指定行的方法，还有键盘上下键导航滚动的实现步骤：

一、滚动到指定数据行的核心方法 #

要把特定数据行滚动到视图范围内，主要有两种实用方式，你可以根据场景选择：

1. 用Angular CDK的工具（更优雅的官方方案）

Angular CDK提供了专门的滚动处理模块，适合需要精细控制滚动逻辑的场景：

• 首先得把ScrollingModule导入到你的组件模块里：

  import { ScrollingModule } from '@angular/cdk/scrolling';
  
  @NgModule({
    imports: [
      // ...其他你需要的模块
      ScrollingModule
    ]
  })
  export class YourTableModule { }
  

• 然后在组件里，通过视图引用获取表格和滚动容器，再计算滚动位置：

  import { ViewportRuler, Scrollable } from '@angular/cdk/scrolling';
  import { ViewChild } from '@angular/core';
  import { MatTable } from '@angular/material/table';
  
  export class YourTableComponent {
    @ViewChild(MatTable) table!: MatTable<any>;
    @ViewChild(Scrollable) scrollableContainer!: Scrollable;
    constructor(private viewportRuler: ViewportRuler) {}
  
    scrollToTargetRow(rowId: string) {
      // 假设你给每行加了唯一id，比如`row-${data.id}`
      const targetRow = document.getElementById(`row-${rowId}`);
      if (!targetRow || !this.scrollableContainer) return;
  
      // 计算滚动偏移量，确保行刚好进入视图
      const viewportRect = this.viewportRuler.getViewportRect();
      const rowRect = targetRow.getBoundingClientRect();
      const scrollTop = this.scrollableContainer.measureScrollOffset('top') + (rowRect.top - viewportRect.top);
      this.scrollableContainer.scrollTo({ top: scrollTop, behavior: 'smooth' });
    }
  }
  

• 模板里记得给每行加上唯一id：

  <mat-table [dataSource]="yourDataSource">
    <!-- 你的列定义 -->
    <mat-row *matRowDef="let row; columns: displayedColumns;" [id]="'row-' + row.id"></mat-row>
  </mat-table>
  

2. 直接操作DOM（简单快捷，适合大多数场景）

如果不需要复杂的滚动计算，直接用DOM元素的scrollIntoView方法就能搞定，代码少还好用：

scrollToTargetRow(rowId: string) {
  const targetRow = document.getElementById(`row-${rowId}`);
  if (targetRow) {
    // behavior设为'smooth'是平滑滚动，'auto'是瞬间定位
    targetRow.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

二、实现键盘上下键滚动导航 #

要实现键盘控制滚动并高亮选中行，只需要监听键盘事件，跟踪当前选中的行索引，然后滚动到对应行就行：

1. 组件里加键盘监听和滚动逻辑

import { Component, HostListener, ViewChild } from '@angular/core';
import { MatTable } from '@angular/material/table';

export class YourTableComponent {
  @ViewChild(MatTable) table!: MatTable<any>;
  yourDataSource = [...你的数据源数组];
  currentSelectedRowIndex = 0; // 默认选中第一行

  // 监听全局键盘事件
  @HostListener('document:keydown', ['$event'])
  onKeyboardEvent(event: KeyboardEvent) {
    if (event.key === 'ArrowUp' && this.currentSelectedRowIndex > 0) {
      this.currentSelectedRowIndex--;
      this.scrollToSelectedRow();
      event.preventDefault(); // 避免页面默认的滚动行为干扰
    } else if (event.key === 'ArrowDown' && this.currentSelectedRowIndex < this.yourDataSource.length - 1) {
      this.currentSelectedRowIndex++;
      this.scrollToSelectedRow();
      event.preventDefault();
    }
  }

  private scrollToSelectedRow() {
    // 获取所有行的DOM元素
    const allRows = this.table._elementRef.nativeElement.querySelectorAll('mat-row');
    if (!allRows[this.currentSelectedRowIndex]) return;

    // 滚动到选中行
    allRows[this.currentSelectedRowIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    // 给选中行加高亮样式
    allRows.forEach(row => row.classList.remove('selected-row'));
    allRows[this.currentSelectedRowIndex].classList.add('selected-row');
  }
}

2. 给选中行加高亮样式

在组件的CSS里加个简单的高亮样式，让用户能直观看到选中的行：

.mat-row.selected-row {
  background-color: rgba(0, 123, 255, 0.1); /* 淡蓝色高亮，你可以自己调颜色 */
}

额外提醒：如果用了虚拟滚动 #

要是你的表格用了cdk-virtual-scroll-viewport做虚拟滚动，那得换用虚拟滚动视图的scrollToIndex方法，代码更简单：

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ViewChild } from '@angular/core';

export class YourTableComponent {
  @ViewChild(CdkVirtualScrollViewport) virtualViewport!: CdkVirtualScrollViewport;

  scrollToRowIndex(index: number) {
    this.virtualViewport.scrollToIndex(index, 'smooth');
  }
}

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