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

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

相关推荐
musk12129 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css