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验证正则表达式汇总
Nov 26 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
vue 2.0封装model组件的方法
Aug 03 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python continue语句实例用法
2020/02/06 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
你们项目是如何进行变更控制的
2015/08/26 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
个人委托书范文
2015/01/28 职场文书
裁员通知
2015/04/25 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技