element的el-table中记录滚动条位置的示例代码

 更新时间:2019年11月06日 09:40:45   作者:小小小华  
这篇文章主要介绍了element的el-table中记录滚动条位置的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

场景重现:在项目中使用了keep-alive来缓存组件,且使用element中的table列表,但在项目中是对table进行了二次封装,跟页码合在了一起。按照网上的直接对scrollTop赋值,赋值失败了,还要加上setTimeout才能成功,虽然实现了功能,但是不知道原因,可以的话希望有人能解答。

废话少说,直接赋上代码。

<template>
 <div class="table">
  <el-table ref="table">
  ...
  </el-table>
  <wp-pager @page-change="pageChange" :total="total" v-if="pager" v-bind="$attrs" v-on="$listeners"></wp-pager>
 </div>

</template>
<script>
 import { WpPager } from '../pager'

 export default {
  data() {
   return {
    scrollTop: null
   }
  },
  activated() {
   this.saveScroll()
  },
  mounted() {
   
  // 监听滚动条的位置 
  this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
    let height = res.target
    this.scrollTop = height.scrollTop
   },false)
  },

  beforeDestroy() {
   this.$refs.table.bodyWrapper.removeEventListener('scroll', (res) => {
    let height = res.target
    this.scrollTop = height.scrollTop
   },false)
  },
  
  methods: {
  // 当页码改变的时候滚动条重新到顶部
   pageChange (page) {
    this.$emit('page-change', page)
    this.scrollTop = 0
    this.saveScroll()
   },

// 这里如果直接赋值给this.$el.querySelector('.el-table__body-wrapper').scrollTop会失效,需要加上setTimeout才行。
   saveScroll() {
    this.$nextTick(()=> {
    setTimeout(() => {
     var scrollTop = this.$el.querySelector('.el-table__body-wrapper')
     scrollTop.scrollTop = this.scrollTop
     }, 13)
    })
   }
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue 使用monaco实现代码高亮

    vue 使用monaco实现代码高亮

    这篇文章主要介绍了vue 使用monaco实现代码高亮的方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 关于Vue 监控数组的问题

    关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧
    2022-05-05
  • vue实现设置载入动画和初始化页面动画效果

    vue实现设置载入动画和初始化页面动画效果

    今天小编就为大家分享一篇vue实现设置载入动画和初始化页面动画效果,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue使用swiper实现左右滑动切换图片

    vue使用swiper实现左右滑动切换图片

    这篇文章主要为大家详细介绍了vue使用swiper实现左右滑动切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue如何利用axios调用后台api接口

    vue如何利用axios调用后台api接口

    这篇文章主要介绍了vue如何利用axios调用后台api接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 深入浅析vue全局环境变量和模式

    深入浅析vue全局环境变量和模式

    这篇文章主要介绍了vue全局环境变量和模式的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue axios数据请求及vue中使用axios的方法

    vue axios数据请求及vue中使用axios的方法

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下
    2018-09-09
  • elementplus card 悬浮菜单的实现

    elementplus card 悬浮菜单的实现

    本文主要介绍了elementplus card 悬浮菜单的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue实现表单验证功能

    vue实现表单验证功能

    这篇文章主要为大家详细介绍了vue实现表单验证功能,基于NUXT的validate方法实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue打包后dist目录下的index.html网页显示空白的问题(两种方案)

    vue打包后dist目录下的index.html网页显示空白的问题(两种方案)

    本文主要介绍了vue打包后dist目录下的index.html网页显示空白的问题,主要介绍了两种方式,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11

最新评论