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


Posted in Javascript onNovember 06, 2019

场景重现:在项目中使用了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>

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

Javascript 相关文章推荐
JavaScript类库D
Oct 24 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
webpack是如何实现模块化加载的方法
Nov 06 #Javascript
node读写Excel操作实例分析
Nov 06 #Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 #Javascript
electron 安装,调试,打包的具体使用
Nov 06 #Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 #Javascript
在vue中阻止浏览器后退的实例
Nov 06 #Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 #Javascript
You might like
php对数组排序代码分享
2014/02/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python线程、进程和协程详解
2016/07/19 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python中os包的用法
2020/06/01 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Python下载的11种姿势(小结)
2020/11/18 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
地理信息科学专业推荐信
2014/09/08 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
党员自我评价范文2015
2015/03/03 职场文书
前台接待员岗位职责
2015/04/15 职场文书
建筑工程催款函
2015/06/24 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
JVM之方法返回地址详解
2022/02/28 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android