Antd Table 如何通过代码控制让指定key的行滚动到可见区域？

普通滚动场景（未开启虚拟滚动） #

Ant Design Table 开启 scroll.y 配置后，会自动给每行的 <tr> 元素添加 data-row-key 属性，值为你配置的 rowKey 对应字段，基于这个特性可以直接通过 DOM 操作实现滚动：

1. 给你的 Table 组件添加自定义类名，避免页面存在多个 Table 时选错元素：

<Table
  className="custom-scroll-table"
  columns={columns}
  dataSource={dataSource}
  rowKey="id" // 替换为你实际使用的rowKey字段
  scroll={{ y: 600 }} // 你的固定高度配置
/>

2. 封装滚动方法：

const scrollToRow = (targetRowKey) => {
  // 获取Table内部滚动容器
  const tableBody = document.querySelector('.custom-scroll-table .ant-table-body');
  if (!tableBody) return;
  // 查找目标行DOM
  const targetRow = document.querySelector(`.custom-scroll-table tr[data-row-key="${targetRowKey}"]`);
  if (!targetRow) return;

  // 方式1：使用scrollIntoView实现
  targetRow.scrollIntoView({
    behavior: 'smooth', // 可选，添加后为平滑滚动，移除则为瞬间滚动
    block: 'nearest' // 对齐规则：可选start/center/end/nearest，nearest会选择最近的边界滚动，避免不必要的页面跳动
  });

  // 方式2：手动计算偏移量，仅滚动Table容器，不会触发外层页面滚动
  // const rowTopOffset = targetRow.offsetTop - tableBody.offsetTop;
  // tableBody.scrollTop = rowTopOffset - 10; // 减10是预留顶部边距，可按需调整
}

虚拟滚动场景（Ant Design v5+ 开启 scroll.virtual: true） #

开启虚拟滚动后，非可视区的行不会渲染DOM，无法通过选择器查找，需要通过Table实例的内置方法实现：

1. 给Table绑定ref：

import { useRef } from 'react';

const tableRef = useRef(null);

<Table
  ref={tableRef}
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  scroll={{ y: 600, virtual: true }} // 开启虚拟滚动
/>

2. 封装滚动方法：

const scrollToRow = (targetRowKey) => {
  // 查找目标行在数据源中的索引
  const targetIndex = dataSource.findIndex(item => item.id === targetRowKey);
  if (targetIndex === -1 || !tableRef.current) return;
  // 调用虚拟滚动内置滚动方法
  tableRef.current.scrollTo({
    index: targetIndex,
    align: 'nearest' // 对齐规则：可选top/middle/bottom/nearest
  });
}

注意事项 #

• 调用滚动方法前要确保Table数据源已经加载完成、DOM已渲染，异步拉取数据的场景建议在useEffect中监听dataSource更新后再执行滚动，必要时可以加setTimeout做延迟兼容
• 存在固定列的场景下，上述方案依然有效，无需额外适配

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