使用keep-alive时，返回后界面表格滚动条位置保留的功能实现

组件使用keep-alive缓存时，切换页签返回后界面表格滚动条位置保留的功能实现

最终实现效果(ps:因为录屏的原因导致页签切换界面会有延迟加载的情况, 不过这不重要哦, 只需要看到效果实现了就行哈)

实现方式:
只需要在当前需要保留表格滚动位置的组件下添加以下代码即可

export default {
 data() {
    return {
      scrollTop: 0,
      scrollTopBottom: 0
    }
  },
// activated被 keep-alive 缓存的组件激活时调用。即进入该组件时调用
//  当然  这里的activated也可以使用路由守卫beforeRouteEnter来操作,只是beforeRouteEnter会在activated之前执行,要进行滚动操作需要延时更久 所以就选择使用activated
 activated() {
 //    因为我们的table被封装了好多层, 需要连续的$refs去获取DOM,所以延时会比较久一点, 否则滚动设置就会无效;  如果代码中的表格就是用的el-table就不需要延时这么久, 而且只需要refs一层就行了
    setTimeout(() => {
    // 主表滚动条设置
      this.$refs.productionDeliveryTable && this.$refs.productionDeliveryTable.$refs.deeTable && (this.$refs.productionDeliveryTable.$refs.deeTable.$refs.deeTable.$refs.deeTable.bodyWrapper.scrollTop = this.scrollTop)
     //  子表滚动条设置
      this.$refs.detailTable && this.$refs.detailTable.$refs.deeTable && (this.$refs.detailTable.$refs.deeTable.$refs.deeTable.$refs.deeTable.bodyWrapper.scrollTop = this.scrollTopBottom)
    }, 700)
  },
 // deactivated被 keep-alive 缓存的组件失活时调用。即  离开该组件时调用 
  deactivated() {
   // 保存滚动条位置
    this.scrollTop = this.$refs.productionDeliveryTable.$refs.deeTable.$refs.deeTable.$refs.deeTable.bodyWrapper.scrollTop
    this.scrollTopBottom = this.$refs.detailTable && this.$refs.detailTable.$refs.deeTable.$refs.deeTable.$refs.deeTable.bodyWrapper.scrollTop
  }
  }

网上看到还有一种做法就是使用全局指令, 数据定义在vuex中, 但是这样的场景就只适合在单个界面使用, 如果多个界面都使用的话会导致所有使用该指令的表格滚动的位置都是一样的

具体想了解可以参考下方的链接
keep-alive里的element表格缓存滚动条
还有跳转详情页保留滚动条的
使用keep-alive时，el-table的滚动条设置问题