el-table刷新保留滚动条
时间: 2025-01-28 15:09:47 浏览: 41
### 实现Element UI el-table刷新后保持滚动条位置不变
为了实现`el-table`在数据更新或页面刷新之后仍然能保持之前的滚动条位置,可以采用以下策略:
通过JavaScript记录下当前的滚动距离,在每次重新加载数据前保存这个值;待新数据显示出来后再将其恢复。具体来说,可以通过监听特定事件来捕获这些时刻,并利用Vue生命周期钩子完成操作。
#### 记录并恢复滚动状态的方法
```javascript
// 定义一个变量用于存储垂直方向上的滚动偏移量
let scrollTop = 0;
export default {
data() {
return {
dataList: [], // 表格的数据列表
tableRef: 'singleTable', // 给<el-table>设置ref属性以便后续调用
};
},
methods: {
saveScrollPosition() {
const bodyWrapper = this.$refs[this.tableRef].$el.querySelector('.el-table__body-wrapper');
scrollTop = bodyWrapper.scrollTop;
},
restoreScrollPosition() {
setTimeout(() => { // 延迟执行以确保DOM已经更新完毕
const bodyWrapper = this.$refs[this.tableRef].$el.querySelector('.el-table__body-wrapper');
bodyWrapper.scrollTop = scrollTop;
}, 1);
}
},
watch: {
dataList(newVal, oldVal){
if (newVal !== oldVal) {
// 数据变化时先保存当前位置再触发重绘逻辑
this.saveScrollPosition();
nextTick().then(() => {
this.restoreScrollPosition();
});
}
}
}
}
```
上述代码片段展示了如何在一个Vue组件内处理这个问题。这里定义了一个名为`scrollTop`的全局变量用来追踪用户的滚动行为[^1]。每当检测到表格中的数据发生变化(`watch`),就会自动调用两个自定义方法——一个是保存现有滚动位置(`saveScrollPosition`),另一个是在适当的时候将滚动条返回原位(`restoreScrollPosition`)。注意这里的延迟是为了等待新的内容被渲染完成后才调整滚动条的位置[^2]。
此外,考虑到某些情况下可能需要手动控制这一过程(比如点击分页按钮),可以在相应的地方显式地调用这两个辅助函数。
阅读全文
相关推荐


















