让el-table长个小脑袋,记住我的滚动位置

需求来源:

需求师:我说,老牧你这个页面再调整一下呗,我希望这个滚动条从详情页返回来的时候还能保持再当时的位置,你看这老是给我刷新置顶好麻烦。

我:行都行的,你是老大你说的算。(等着等我骑到你头上)【心理活动】

首先,我去网上查了一下(没做过先看看有没有现成的案例)。看了一圈大概都是keep-alive+data中的字段进行辅助。ok搞起!!!!!

第一步:keep-alive配置

js 复制代码
<template>
    <div>
        <keep-alive>
            <router-view v-if="alivePath.includes($route.path)"></router-view>
        </keep-alive>
        <router-view v-if="!alivePath.includes($route.path)"></router-view>
    </div>
</template>
data(){
    return{
        alivePath:["/projectMaintenance"],
    }
}

第二步:对应页面位置记录

js 复制代码
data(){
  return{
    scrollTop:0,
  }
},
methods:{
  restoreScroll() {
    if (this.scrollTop > 0) {
      setTimeout(() => {
        this.$refs.multipleTable.bodyWrapper.scrollTop=this.scrollTop
      }, 100);
    }
  },
},
activated() {
  // 当组件被重新激活时,恢复滚动位置
  this.$nextTick(() => {
    this.restoreScroll();
  });
},
beforeRouteLeave(to, from, next) {
  // 在离开前保存滚动位置
  if (this.$refs.multipleTable) {
    this.scrollTop = this.$refs.multipleTable.bodyWrapper.scrollTop;
  }
  next();
}

就这么点代码,你没看错哈哈哈哈。

有些地方我知道可能我写的不够好,所以我想说以上内容仅供参考

相关推荐
namekong84 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天5 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄7 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1018 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19438 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧9 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台9 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1009 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc10 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅11 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学