- 路由元信息中增加keepAlive:true , scrollTop: {tableA: 0} , 没有直接使用scrollTop: 0是防止有的页面存在两个table
js
{
path: '/**/**',
name: '**',
component: () => import('@/views/**/index.vue'),
meta: {
title: '**',
affix: false,
keepAlive: true,
scrollTop: {
tableA: 0,
},
},
},
- 离开时记录页面中表格滚动条的位置
js
router.beforeEach(async (to, from, next) => {
if (from.meta.keepAlive === true) {
const obj = from.meta.scrollTop;
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
const tableId = key;
let $content = document.getElementById(tableId);
if ($content) {
$content = $content.querySelector('.el-table__body-wrapper');
const scrollTop = $content ? $content.scrollTop : 0;
from.meta.scrollTop[tableId] = scrollTop;
}
}
}
}
- 页面激活时,给table的滚动条赋值; 同时在template中要给table增加一个id="tableA"
js
onActivated(() => {
setTimeout(() => {
const ele = tableRef.value.$el.querySelector('.el-table__body-wrapper');
ele.scrollTop = route.meta.scrollTop.tableA;
});
});
chatGPT的实现
要实现从详情页返回列表页时保持表格滚动条的位置,可以使用以下步骤:
- 在列表页的组件中,监听详情页返回事件,例如点击返回按钮时触发一个方法。
- 在该方法中,保存当前表格滚动条的位置,可以使用
ref
引用表格组件,并获取其scrollToTop
或scrollTo
方法来保存当前滚动位置。 - 导航回列表页,并在列表页组件的
mounted
钩子中恢复保存的滚动位置。 - 在列表页的
mounted
钩子中,使用ref
引用表格组件,并调用恢复滚动位置的方法,例如scrollToTop
或scrollTo
。
下面是一个示例代码:
vue
<template>
<div>
<el-button @click="goToDetail">进入详情页</el-button>
<el-table ref="table" :data="tableData" style="max-height: 400px; overflow-y: auto;">
<!-- 表格列定义 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
scrollPosition: 0 // 保存滚动位置的变量
};
},
methods: {
goToDetail() {
// 保存当前滚动位置
this.scrollPosition = this.$refs.table.bodyWrapper.scrollTop;
// 导航到详情页
// ...
},
restoreScrollPosition() {
// 恢复滚动位置
this.$refs.table.bodyWrapper.scrollTop = this.scrollPosition;
}
},
mounted() {
// 恢复滚动位置
this.$nextTick(() => {
this.restoreScrollPosition();
});
}
};
</script>
在上面的示例中,goToDetail
方法用于导航到详情页前保存当前滚动位置,restoreScrollPosition
方法用于恢复保存的滚动位置。在列表页的 mounted
钩子中通过 this.$nextTick
方法来确保在表格组件渲染完成后再恢复滚动位置。
请根据您的实际代码和需求进行适当的调整。