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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
js 编写规范
Mar 03 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
详解jQuery事件
Jan 13 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
d3.js实现图形缩放平移
Dec 19 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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
VBScript版代码高亮
2006/06/26 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
用python生成1000个txt文件的方法
2018/10/25 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python列表推导式操作解析
2019/11/26 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
心理健康教育心得体会
2013/12/29 职场文书
应用英语专业自荐信
2014/01/26 职场文书
安全生产责任书
2014/03/12 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
初中作文评语
2014/12/25 职场文书
转让协议书
2015/01/27 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis