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

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

相关推荐
字节架构前端33 分钟前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构
奕羽晨1 小时前
关于CSS的一些读书笔记
前端·css
Poetry2371 小时前
大屏数据可视化适配方案
前端
遂心_1 小时前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js
轻语呢喃1 小时前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html
用户3802258598241 小时前
vue3源码解析:watch的实现
前端·vue.js·源码
F2E_Zhangmo1 小时前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
鹏程十八少1 小时前
3. Android 第三方框架 Okhttp, Retrofit 的动态代理和适配器模式深度解读三
前端
阿怼丶1 小时前
🚶‍♂️基于 Three.js 的自定义角色漫游系统实战:支持碰撞检测与动画控制
前端·three.js