el-table中列表选中某一行并滚动到指定位置

在Vue 2中使用Element UI的表格组件（<el-table>），要实现自动滚动到指定行的位置，你可以通过操作DOM元素或使用Vue的响应式系统结合Element UI的表格组件特性来实现。以下是一个基本的实现步骤：

1. 获取表格体和行元素的引用：
   你需要使用Vue的ref属性来获取表格体和行元素的引用。然而，由于Element UI的表格组件是渲染成多个子组件的，直接获取行元素可能比较困难。一个常见的方法是使用$nextTick来确保DOM已经更新，然后通过递归或特定的选择器来找到目标行。

2. 计算滚动位置：
   一旦你有了目标行的引用，你可以计算其相对于表格体的顶部偏移量。这通常涉及到获取行元素和表格体元素的高度和位置信息。

3. 执行滚动：
   使用JavaScript的scrollTop属性来设置表格体的滚动位置。

4. <template> 
   <div> 
   <el-table :data="tableData" ref="myTable" @row-click="handleRowClick" style="width: 100%"> <el-table-column prop="date" label="Date" width="180"> </el-table-column> 
   <el-table-column prop="name" label="Name" width="180"> </el-table-column> 
   <el-table-column prop="address" label="Address"> </el-table-column> 
   </el-table> 
   </div>
    </template>
    <script> 
   export default { 
   data() { 
   return { 
   tableData: [ { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, // ... 其他数据 ], }; 
   },
    methods: {
    handleRowClick(row, rowIndex, event) {
    this.$nextTick(() => { 
   const tableBodyWrapper = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper tbody'); 
   const rows = tableBodyWrapper.querySelectorAll('.el-table__row'); 
   if (rows.length > rowIndex && rowIndex >= 0) { 
   const targetRow = rows[rowIndex];
    const rowTop = targetRow.offsetTop; 
   const tableBodyHeight = tableBodyWrapper.clientHeight;
    const rowHeight = targetRow.offsetHeight; 
   // 计算滚动位置，确保行完全可见
    let scrollTop = rowTop - (tableBodyHeight - rowHeight) 
    if (scrollTop < 0) { 
   scrollTop = 0; // 防止滚动到负位置 
   } 
   tableBodyWrapper.parentNode.scrollTop = scrollTop; // 滚动表格体的外层容器
    } 
   }); 
   }, 
   }, 
   }; 
   </script> 
   <style scoped> 
   /* 你可以在这里添加一些自定义样式 */
    </style>

注意事项： 

• 上面的代码假设每行的高度是固定的或者你可以通过某种方式获取每行的高度。如果行高不固定，你可能需要计算每行的高度并累加来确定目标行的滚动位置。
• 由于Vue和Element UI的渲染机制，你可能需要在DOM更新后执行滚动操作，这就是为什么我们使用$nextTick的原因。
• 上面的选择器（.el-table__body-wrapper和.el-table__row）是基于Element UI的默认样式类名。如果你的项目中有自定义样式或者Element UI的版本不同，这些类名可能会有所不同。
• 如果你的表格有分页或者虚拟滚动等复杂功能，这个简单的实现可能不适用，你需要根据具体情况进行调整。