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

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

相关推荐
小远yyds14 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205873 小时前
web端手机录音
前端