vue elementUI表表数据滚动惰性加载的实现方法

项目中遇到性能问题

vue elementUI表显示数据。当有大量数据时，它不能显示在一个页面上。同时，一次请求的数据量过大，会增加网页渲染时间，影响体验。

这个时候，往往有两种处理方式。

1.分页，如下所示

2.如果我不想分页，想在一页上显示所有数据，该怎么办？此时，您实际上可以延迟加载数据

下表只显示了开头的31行数据

当滚动条被拉低时，将加载另外31条数据。如果剩余数据小于31，则剩余数据将被加载

根据项目的要求，需要一页才能看到所有的数据，所以我选择了第二种方法

那么如何实现第二种方式呢？

在了解其原理之前，您需要区分三个属性：

ScrollHeight:指元素的总高度，包括滚动条中的内容。只读属性。没有px单位。下图是54条数据的高度，但是因为滚动条的原因，屏幕看不到这么高

ScrollTop:当滚动条出现在元素上时，向下拖动滚动条，内容将向上滚动。可读和可写属性。没有px单位。如果元素没有滚动条，scrollTop的值为0，只能是正值。这是下图中红色方框的高度

ClientHeight:元素的工作区大小是指元素内容及其边框所占据的空间，实际上就是可见区域的大小。它是下面红色箭头的高度

那怎么判断滚动条已经滚到底部了呢？

scroll height-scroll top-client height=0，这个时间可以是滚动条滚动到底部的时间。

当第一次请求数据时，首先设置一个变量来记录请求的数量(事实上，后台也处理分页)

this.currentPage=1，$ this=this这个。$axios.fun()。然后(RES={ $ this . total page=RES . total page；//我们需要知道总页数$ this . tabledata=RES . data；//table data})侦听table dom对象的滚动事件

let DOM=document . queryselector(TargetDom)；dom.addEventListener('scroll '，function(){ const scroll distance=DOM . scroll height-DOM . scroll top-DOM . client height；如果(scrollDistance=0){//等于0证明已经到达终点，可以请求接口if ($this.currentPage $ this)。total page){//如果当前页码小于总页码，请请求$ this。当前页面；//当前页码自增//请求接口代码$ this。$ axios.fun()。然后(RES={$ this。tabledata=$ this。table data . concat(RES . data)//将请求的数据与当前显示的数据结合起来})}}})好，表滚动、下拉并延迟加载。