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

66 阅读 0 评论 44 点赞

我是靠谱客的博主虚心口红，最近开发中收集的这篇文章主要介绍保持el-table表格滚动条状态，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

页面保持状态可以用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
  },