vue element-ui table表格滚动加载方法


Posted in Javascript onMarch 02, 2018

添加全局注册事件,用来监听滚动事件

window.Vue.directive('loadmore', {
 bind(el, binding) {
 const selectWrap = el.querySelector('.el-table__body-wrapper')
 selectWrap.addEventListener('scroll', function() {
  let sign = 100
  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
  if (scrollDistance <= sign) {
  binding.value()
  }
 })
 }
})

sign 用于标记位置

直接让scrollDistance === sign 并不能保证每次都会触发,所以用区间表示。后续会处理频繁触发问题。

添加事件

给需要无线加载的表格添加自定义事件,v-loadmore=”loadMore”。在methods中定义触发的事件

loadMore () {
 if (this.loadSign) {
  this.loadSign = false
  this.page++
  if (this.page > 10) {
  return
  }
  setTimeout(() => {
  this.loadSign = true
  }, 1000)
  console.log('到底了', this.page)
 }
 }

this.loadSign 用于标记page是否继续递增

以上这篇vue element-ui table表格滚动加载方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
node跨域请求方法小结
Aug 25 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
浅谈React组件之性能优化
Mar 02 #Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 #Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 #Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 #Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 #Javascript
详解node.js 下载图片的 2 种方式
Mar 02 #Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 #Javascript
You might like
PHP安全性漫谈
2012/06/28 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python类属性的延迟计算
2016/10/22 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
普天C++笔试题
2016/03/20 面试题
总经理助理工作职责
2014/02/06 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
员工安全生产承诺书
2014/05/22 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书