监听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 相关文章推荐
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
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
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php解决约瑟夫环示例
2014/04/09 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python tkinter label 更新方法
2018/10/11 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python和Bash结合在一起的方法
2020/11/13 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
小学班主任事迹材料
2014/12/17 职场文书
企业工会工作总结2015
2015/05/13 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
电工实训心得体会
2016/01/14 职场文书
日元符号 ¥
2022/02/17 杂记