element Plus table表格定位滚动到指定行

在Element Plus中，如果你想要滚动表格到指定的行，可以使用Table组件的scrollTo方法。这个方法允许你指定滚动到的行的rowKey或者行的索引。

以下是一个简单的例子，演示如何使用scrollTo方法：

<template>
  <el-table
    ref="tableRef"
    :data="tableData"
    height="200"
    style="overflow: auto;"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="scrollToRow(5)">滚动到第六行</el-button>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
 
const tableRef = ref(null);
const tableData = ref([{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}]);
 
// 填充更多的数据以确保表格有足够的行
for (let i = 0; i < 20; i++) {
  tableData.value.push({
    date: `2016-05-02${i}`,
    name: `王小虎${i}`,
    address: `上海市普陀区金沙江路 1518 弄${i}`
  });
}
 
const scrollToRow = (rowIndex) => {
  tableRef.value.scrollTo(rowIndex);
};
</script>

在这个例子中，我们首先定义了一个带有20条数据的表格。然后，我们创建了一个按钮，当点击时，会调用scrollToRow函数，该函数使用tableRef.value.scrollTo方法来滚动到指定的行。注意，scrollTo方法接受一个参数，可以是行的索引或者rowKey。如果你的表格数据中有唯一的rowKey字段，你可以传递这个字段的值来指定要滚动到的行。