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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
JS ES6异步解决方案
Apr 29 Javascript
最新最全的手机号验证正则表达式
Feb 24 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学习笔记之一
2011/01/17 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python测试驱动开发实例
2014/10/08 Python
Python中的异常处理学习笔记
2015/01/28 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
产品质量承诺书
2014/03/27 职场文书
表扬信范文
2015/05/04 职场文书
北京青年观后感
2015/06/15 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技