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

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

相关推荐
susu10830189111 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript