Element UI Table 滚动条位置保持方案

在后台管理系统的实际开发场景中，若表格容器设置了固定高度，当内容超出时会自动生成垂直滚动条。

此时若对表格内的行数据进行编辑操作或执行拖拽排序，数据刷新后滚动条通常会默认重置到顶部，这种交互体验并不理想。

为了实现数据刷新后滚动条仍停留在当前查看位置，可参考以下实现步骤：

首先，在 el-table 组件标签上添加 ref 属性，以便在组件实例中获取该表格的引用。

<el-table :data="tableData" v-loading="tableLoading" ref="elTable"></el-table>

其次，在 Vue 组件的 data 函数中 return 定义必要的状态变量，用于存储滚动位置及表格实例。

data() {
    return {
      scrollTop: '', // 滚动条位置
      elTable: this.$refs.elTable.bodyWrapper, // 获取table表格父级的classname
    };
  },

当表格内容较多导致出现滚动条时，其渲染结构和样式由 Element UI 内部处理，我们需要关注的是其内部滚动容器的引用。

在用户点击编辑按钮触发数据更新前，获取当前表格滚动条的垂直偏移量（scrollTop）并保存。

this.scrollTop = this.elTable.scrollTop;

在表格数据完成刷新且 DOM 更新完成后，将之前保存的滚动位置重新赋值给表格的滚动容器，以恢复滚动条位置。

setTimeout(() => {
  $(this.elTable).scrollTop(this.memoryScrollTop) // JQ写法
})

通过以上步骤，即可解决 Element UI Table 在编辑或排序后滚动条位置丢失的问题。如需了解更多 Element UI Table 相关用法，可参考本站其他文章或继续浏览后续内容，感谢支持。