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调用WebService的示例
Apr 07 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Javascript自定义事件详解
Jan 13 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python中的常量和变量代码详解
2018/07/25 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
广告学专业毕业生自荐信
2013/09/24 职场文书
铁路个人事迹材料
2014/01/30 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
技能竞赛活动方案
2014/02/21 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python