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小技巧 2.5 则
Sep 12 Javascript
最短的IE判断代码
Mar 13 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
js本地图片预览实现代码
Oct 09 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
关于jquery layui弹出层的使用方法
Apr 21 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
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python编程argparse入门浅析
2018/02/07 Python
python的中异常处理机制
2018/08/30 Python
python 获取图片分辨率的方法
2019/01/08 Python
python pandas模块基础学习详解
2019/07/03 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Django model class Meta原理解析
2020/11/14 Python
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
机关职员工作检讨书
2014/10/23 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
社团个人总结范文
2015/03/05 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python