Vue3实现详情页返回列表页时保持表格滚动条的位置

  1. 路由元信息中增加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,
          },
        },
      },
  1. 离开时记录页面中表格滚动条的位置
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;
        }
      }
    }
  }
  1. 页面激活时,给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的实现

要实现从详情页返回列表页时保持表格滚动条的位置,可以使用以下步骤:

  1. 在列表页的组件中,监听详情页返回事件,例如点击返回按钮时触发一个方法。
  2. 在该方法中,保存当前表格滚动条的位置,可以使用 ref 引用表格组件,并获取其 scrollToTopscrollTo 方法来保存当前滚动位置。
  3. 导航回列表页,并在列表页组件的 mounted 钩子中恢复保存的滚动位置。
  4. 在列表页的 mounted 钩子中,使用 ref 引用表格组件,并调用恢复滚动位置的方法,例如 scrollToTopscrollTo

下面是一个示例代码:

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 方法来确保在表格组件渲染完成后再恢复滚动位置。

请根据您的实际代码和需求进行适当的调整。

相关推荐
jojo是只猫34 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程9 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo11 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原13 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序