el-table切换页面或tabs记住滚动条位置
warning:
这篇文章距离上次修改已过297天,其中的内容可能已经有所变动。
在Vue.js中使用Element UI的el-table
组件时,如果需要在切换页面或标签页(tabs)时记住滚动条的位置并恢复,可以通过监听路由变化或tabs的变化事件来保存和恢复滚动位置。
以下是一个基于Vue Router和Element UI的简单示例:
<template>
<el-table
ref="table"
:data="tableData"
height="400"
...>
<!-- 列配置 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
scrollPosition: 0, // 滚动位置
};
},
mounted() {
this.restoreScrollPosition();
// 监听路由变化来保存滚动位置
this.$router.afterEach(() => {
this.saveScrollPosition();
});
},
methods: {
saveScrollPosition() {
const tableBodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
if (tableBodyWrapper) {
this.scrollPosition = tableBodyWrapper.scrollTop;
}
},
restoreScrollPosition() {
this.$nextTick(() => {
const tableBodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
if (tableBodyWrapper) {
tableBodyWrapper.scrollTop = this.scrollPosition;
}
});
},
},
// 当前组件被激活时保存滚动位置
beforeRouteEnter(to, from, next) {
next(vm => {
vm.saveScrollPosition();
});
},
// 当前组件被离开时恢复滚动位置
beforeRouteLeave(to, from, next) {
this.restoreScrollPosition();
next();
},
};
</script>
在这个示例中,我们使用了el-table
的ref
属性来获取表格DOM元素,并在mounted
钩子中调用了restoreScrollPosition
来尝试恢复之前保存的滚动位置。同时,我们使用了Vue Router的导航守卫来在路由切换前后保存和恢复滚动位置。
如果你使用的是Element UI的el-tabs
组件,可以类似地使用el-tabs
的事件监听来保存和恢复滚动位置状态。
评论已关闭