保持el-table表格滚动条状态

本文介绍了如何在Vue.js应用中使用keep-alive组件来保持页面状态,特别是滚动条位置。通过在deactivated和activated钩子函数中分别保存和恢复滚动距离,实现了页面切换后返回时滚动位置的记忆功能。这一方法有助于提升用户体验,避免了重复请求数据并确保页面状态的一致性。
摘要由CSDN通过智能技术生成

 如上图所示,当我们点击调价跳转到其他页面时,我们希望当我们返回这个页面时,滚动条位置保持在离开的位置。

页面保持状态可以用keep-live,不用重复请求数据,但是keep-live不会保持我们查看时的状态,因此我们需要自己去手动修改。

keep-live有两个钩子函数,deactivated(){}代表的是离开当前页面时发生的事件。

activated(){}代表进入此页面时发生的事件。

所以我们可以在离开页面的钩子函数中获取最后的滚动距离,在进入页面的钩子函数中设置一下滚动距离,这样就实现了状态保留的情况。

首先获取元素实例,用ref和$refs。

设置ref
<el-table ref="left"></el-table>
获取实例
this.$refs.left
在bodyWrapper中可以获取左右滑动距离,在$refs中获得bodyWrapper
this.$refs.left.$refs.bodyWrapper.scrollLeft
在data中定义变量存储值
scrollLeft:''
接下来写钩子函数中的事件
 deactivated() {
    // console.log(this.$refs.left);
    console.log(this.$refs.left.$refs.bodyWrapper.scrollLeft);
   this.scrollLeft=this.$refs.left.$refs.bodyWrapper.scrollLeft
  },
  activated() {
    //页面每次激活时 都会获取之前的scrollLeft
    this.$refs.left.$refs.bodyWrapper.scrollLeft=this.scrollLeft
  },

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值