监听element-ui table滚动事件的方法


Posted in Javascript onMarch 26, 2019

背景

做管理平台的项目,用到了element-ui,需要通过监听el-table滚动的位置来获取最新的数据,那么怎么样监听el-table的滚动呢?

准备

我们默认的技术栈是 vue+element-ui

template代码:

<el-table 
 :data="logList" 
 :show-header="false" 
 row-class-name="table-row-class" 
 height="700" 
 ref="table" 
 @row-click="rowClick">
 <el-table-column type="expand">
  <el-table-column
  label="log信息"
  prop="message">
 </el-table-column>
</el-table>

绑定监听事件

mounted() {
  // 获取需要绑定的table
  this.dom = this.$refs.table.bodyWrapper
  this.dom.addEventListener('scroll', () => {
   // 滚动距离
   let scrollTop = this.dom.scrollTop
   // 变量windowHeight是可视区的高度
   let windowHeight = this.dom.clientHeight || this.dom.clientHeight
   // 变量scrollHeight是滚动条的总高度
   let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
   if (scrollTop + windowHeight === scrollHeight) {
    // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
    if (!this.allData) this.getMoreLog()
    console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
   }
  })
 }

获取到新的数据后,调整滚动条的位置

getMoreLog() {
  ...
  this.dom.scrollTop = this.dom.scrollTop - 100
  ...
 }

结语

至此我们已经完成了对table的绑定! 希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 #Javascript
node之本地服务器图片上传的方法示例
Mar 26 #Javascript
详解vue-element Tree树形控件填坑路
Mar 26 #Javascript
vue-router 起步步骤详解
Mar 26 #Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 #Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 #Javascript
详解用JS添加和删除class类名
Mar 25 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
PHP教程 变量定义
2009/10/23 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
Javascript 实用小技巧
2010/04/07 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
岗位标兵事迹材料
2014/05/17 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Node.js实现断点续传
2021/06/23 Javascript