PrimeNG滚动表格按键选中行时滚动位置未同步变更问题咨询

解决方案 #

你可以通过PrimeNG内置API或者手动DOM操作两种方式实现选中行自动滚动到可视区域，两种方案代码改动都很小： #

方案1：使用PrimeNG Table内置API（推荐，PrimeNG v10及以上版本支持）

PrimeNG的可滚动Table自带scrollToIndex()方法，直接传入选中行的下标即可自动调整滚动位置，只需要在你修改选中行的三处逻辑后新增调用即可：
修改后的关键代码如下：

onFilter(event, dt) {
  this.cpt = 0;
  if (event.filteredValue.length > 0) {
    this.selectedProduct = event.filteredValue[0];
    this.visibleProducts = event.filteredValue;
    // 新增：过滤后默认选中第一行，滚动到对应位置
    this.table.scrollToIndex(this.cpt, 'nearest');
  }
}

@HostListener('keydown.ArrowUp', ['$event']) ArrowUp($event: KeyboardEvent) {
  if (this.cpt > 0) {
    this.cpt--;
  }
  this.selectedProduct = this.visibleProducts[this.cpt];
  // 新增：向上切换选中后滚动
  this.table.scrollToIndex(this.cpt, 'nearest');
}

@HostListener('keydown.ArrowDown', ['$event']) ArrowDown(
  $event: KeyboardEvent
) {
  if (this.cpt < this.visibleProducts.length - 1) {
    this.cpt++;
  }
  this.selectedProduct = this.visibleProducts[this.cpt];
  // 新增：向下切换选中后滚动
  this.table.scrollToIndex(this.cpt, 'nearest');
}

scrollToIndex的第二个参数可选值为'start'/'center'/'end'/'nearest'，用'nearest'可以避免滚动幅度过大，体验和Tab键导航的自动滚动效果一致。 #

方案2：手动DOM操作（兼容低版本PrimeNG）

如果你用的PrimeNG版本低于v10没有内置scrollToIndex方法，可以直接操作DOM实现：
先新增一个公共滚动方法，然后在三处修改选中行的位置调用即可：

// 新增滚动方法
private scrollToSelectedRow() {
  // 拿到表格滚动容器
  const scrollViewport = this.table.containerViewChild.nativeElement.querySelector('.p-scroller-viewport');
  // 拿到当前选中的高亮行
  const selectedRow = scrollViewport.querySelector('tr.p-highlight');
  if (selectedRow) {
    selectedRow.scrollIntoView({
      behavior: 'auto', // 要平滑滚动可以改成'smooth'
      block: 'nearest',
      inline: 'nearest'
    });
  }
}

// 调用示例（ArrowUp、ArrowDown、onFilter里都加这一行）
@HostListener('keydown.ArrowUp', ['$event']) ArrowUp($event: KeyboardEvent) {
  if (this.cpt > 0) {
    this.cpt--;
  }
  this.selectedProduct = this.visibleProducts[this.cpt];
  this.scrollToSelectedRow();
}

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