vue elementUI table表格数据 滚动懒加载的实现方法


Posted in Javascript onApril 04, 2019

在项目中遇到了一个性能问题

vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验,

这个时候常常有两种方法处理,

1、分页,如下

 vue elementUI table表格数据 滚动懒加载的实现方法

2、如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了

如下一开始表格只显示31行数据

vue elementUI table表格数据 滚动懒加载的实现方法

当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的

 vue elementUI table表格数据 滚动懒加载的实现方法

根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式

那么第二种方式要怎么去实现呢?

在了解它的原理前,你需要分清楚三个属性:

scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。就是下图中,54条数据的高度,但是因为有滚动条,所以屏幕看不到这么高

scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。就是下图中红色框的高度

clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小,实际上就是可视区域的大小。就是下图红色箭头的高度

 vue elementUI table表格数据 滚动懒加载的实现方法

那如何判断滚动条滚到底部了呢?

scrollHeight-scrollTop-clientHeight=0,这个时候可以就是滚动条滚到底部的时候了。

在第一次请求数据的时候,先设置一个变量来记录请求次数(其实后台也是做分页的处理)

this.currentPage = 1,
$this = this;
this.$axios.fun().then(res=>{
   $this.totalPage = res.totalPage; //这里需要知道总页数
   
   $this.tableData = res.data;//表格数据
})

监听表格dom对象的滚动事件

let dom = document.querySelector(targetDom);
  dom.addEventListener("scroll", function() {
    const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
    if(scrollDistance <=0){//等于0证明已经到底,可以请求接口
      if($this.currentPage < $this.totalPage){//当前页数小于总页数就请求
        $this.currentPage++;//当前页数自增
        
        //请求接口的代码
        $this.$axios.fun().then(res=>{
        
          $this.tableData = $this.tableData.concat(res.data)//将请求回来的数据和当前展示的数据合并在一起
        })
        
      }
    }
  })

好了,表格滚动下拉懒加载数据就是这样实现的,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
详解jenkins自动化部署vue
May 14 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
js 计算图片内点个数的示例代码
Apr 04 #Javascript
在node中使用jwt签发与验证token的方法
Apr 03 #Javascript
全面了解JavaScript的作用域链
Apr 03 #Javascript
从理论角度讨论JavaScript闭包
Apr 03 #Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 #Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 #Javascript
js前端面试之同步与异步问题详解
Apr 03 #Javascript
You might like
php实现简单洗牌算法
2013/06/18 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
php intval函数用法总结
2019/04/14 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
js快速排序的实现代码
2013/12/08 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python根据路径导入模块的方法
2014/09/30 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python爬取指定微信公众号文章
2018/12/20 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python多进程并发demo实例解析
2019/12/13 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
车间调度岗位职责
2013/11/30 职场文书
网络研修随笔感言
2014/02/17 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
三峡人家导游词
2015/01/31 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python