让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();
}

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

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

相关推荐
西洼工作室2 小时前
CSS高效开发三大方向
前端·css
昔人'2 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾3 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶4 小时前
Starting again-02
开发语言·前端·javascript
Apifox.4 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku5 小时前
Typescript return type
前端·javascript·typescript
叁佰万5 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆5 小时前
js异步任务你都知道了吗?
前端·面试
光影少年5 小时前
react生态
前端·react.js·前端框架
golang学习记5 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端