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 相关文章推荐
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
VUE长按事件需求详解
Oct 18 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 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仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
如何利用Python识别图片中的文字
2020/05/31 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
美国家具网站:Cymax
2016/09/17 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
函授大学生自我鉴定
2014/02/05 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
陈欧广告词
2014/03/14 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
工程部文员岗位职责
2015/02/04 职场文书
基于Python实现股票收益率分析
2022/04/02 Python