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 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
详解JavaScript 的变量
Mar 08 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
小程序实现选择题选择效果
2018/11/04 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
房屋出售协议书
2014/04/10 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python