VUE项目中如何实现表格数据的懒加载

vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，
这个时候常常有两种方法处理，
1、分页处理

如果不想分页,可以在数据请求到后值渲染10或20条数据,然后再使用setTimeout定时器加一定的延时,再将其余的数据循环push到当前的表格数据中
例如:

 let tableData = res.dataif(tableData.length > 10){this.tableData = []this.tableData = tableData .slice(0,10)setTimeout(function(){for(let i=11;i<tableData.length;i++){this.tableData.push(tableData[i])}})       }else{this.tableData =  tableData }
})

进行滚动懒加载
例如 : 一开始表格只显示20行数据,当将滚动条拉到低的时候，就会再加载20条数据，如果剩下的数据不足20，那就加载剩下的.
在了解它的原理前，你需要分清楚三个属性：
scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。就是下图中，54条数据的高度，但是因为有滚动条，所以屏幕看不到这么高
scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。
clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小，实际上就是可视区域的大小。.
那如何判断滚动条滚到底部了呢？
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)//将请求回来的数据和当前展示的数据合并在一起})           }}})

VUE项目中如何实现表格数据的懒加载相关推荐

vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
react中使用lazy函数进行路由懒加载
react中使用lazy函数进行路由懒加载 import React, { Component,lazy,Suspense} from 'react' //1.通过React的lazy函数配合impo ...
Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
Vue项目中使用props传递数据并允许子组件修改的方案
在项目中遇到了一个相关需求: 一个页面中为了能够使代码更加简洁和易于查看,将其分成了多个功能模块.此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改.此时考虑到Vue项目中的数据通信方式: ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
vue懒加载对话框API封装技巧（项目必备技能，适用于各种需要懒加载动态展示的弹框组件）
懒加载对话框的方式做到了在你调用弹框展示API的那一刻,才去加载对话框文件并最终显示弹框效果.它最大的意义在于减少了你初次进入页面时加载的文件资源请求量和大小(加载资源小了,网页加载速度自然就提升了) ...
element中树形数据与懒加载实现全部展开和全部收起
element中属性懒加载数据 default-expand-all属性::是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效如果在表格头上加上一个按钮实现全部展开与收起类似如 ...
ajax图文列表加载数据加入懒加载与onerror
css部分 *{margin:0;padding:0;border:0;} ul{list-style:none;} .bOx{width:1200px;margin:20px auto;} .lis ...
node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）
方法一.vue+js-xlsx 1.vue项目内安装两个依赖:xlsx.file-saver npm install xlsx --save npm install file-saver --sa ...

VUE项目中如何实现表格数据的懒加载

VUE项目中如何实现表格数据的懒加载相关推荐

最新文章

热门文章