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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
JS 树形递归实例代码
May 18 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
vue的mixins属性详解
Mar 14 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
jquery 上下滚动广告
2009/06/17 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
python字符串中的单双引
2017/02/16 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Python帮你识破双11的套路
2019/11/11 Python
python调用接口的4种方式代码实例
2019/11/19 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
pygame实现飞机大战
2020/03/11 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
PyQt实现计数器的方法示例
2021/01/18 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
应届护士推荐信
2013/11/16 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书