在 Vue3 + Element Plus 项目中，表格的行高可能不一致，因此无法直接使用简单的行索引滚动方法。需要手动计算从表格顶部到指定行的累计高度，然后设置滚动位置。

解决方案步骤

1. 获取表格的 bodyWrapper 元素：Element Plus 表格的滚动区域通常位于 .el-table__body-wrapper 元素内。
2. 获取所有行元素：通过 DOM 查询选择器获取所有 tr 元素。
3. 验证行索引：确保传入的行索引在有效范围内（0 到行数-1）。
4. 计算累计高度：遍历从第 0 行到指定行索引的前一行，累加每行的 offsetHeight（包括边框、内边距等）。
5. 设置滚动位置：将 bodyWrapper 的 scrollTop 属性设置为计算出的累计高度。

代码实现

以下是 TypeScript 函数实现。假设 tableRef 是通过 ref() 创建的表格组件实例引用（例如 reservoirTableRef.value），rowIndex 是从 0 开始的行索引。

function scrollToTableRow(tableRef: any, rowIndex: number) {
  // 步骤 1：获取 bodyWrapper 元素
  const bodyWrapper = tableRef.$el.querySelector('.el-table__body-wrapper');
  if (!bodyWrapper) {
    console.error('表格 bodyWrapper 元素未找到');
    return;
  }

  // 步骤 2：获取所有行元素
  const rows = bodyWrapper.querySelectorAll('tbody tr');
  if (rows.length === 0) {
    console.error('表格无数据行');
    return;
  }

  // 步骤 3：验证行索引
  if (rowIndex < 0 || rowIndex >= rows.length) {
    console.error(`无效的行索引：${rowIndex}。有效范围：0 到 ${rows.length - 1}`);
    return;
  }

  // 步骤 4：计算累计高度（从第 0 行到 rowIndex-1 行）
  let cumulativeHeight = 0;
  for (let i = 0; i < rowIndex; i++) {
    cumulativeHeight += rows[i].offsetHeight;
  }

  // 步骤 5：设置滚动位置
  bodyWrapper.scrollTop = cumulativeHeight;
}

使用示例

在 Vue 组件中，你可以这样调用该函数：

import { ref } from 'vue';

// 假设你的表格组件 ref 为 reservoirTableRef
const reservoirTableRef = ref<any>(null);

// 在需要滚动时调用，例如滚动到第 3 行（索引为 2）
scrollToTableRow(reservoirTableRef.value, 2);

注意事项

• 渲染时机：确保在表格数据已渲染后调用此函数（例如，在 nextTick() 或数据加载完成的回调中）。
• 行索引有效性：传入的行索引必须基于当前渲染的数据行。如果表格分页或动态加载数据，索引可能需要调整。
• 性能考虑：如果表格行数非常多（如数千行），遍历计算可能影响性能。建议在数据量大的场景下优化（如虚拟滚动）。
• 兼容性：此方法依赖于 DOM 查询，确保 Element Plus 版本兼容（测试于常见版本）。
• 错误处理：函数已包含基本错误检查，但你可以根据需求扩展（例如，添加更多边界条件）。