【性能优化】虚拟懒加载（下拉滚动加载长列表）element-puls+el-table

目录

前言

提示：这里可以添加本文要记录的大概内容：

在element-plus中，如果数据超过1k，就会感觉到明显的卡顿，应该是渲染的卡顿吧。反正我在请求回来接口之后，loading，会卡顿。用户体验十分不佳。然后吧，这个列表还不能分页，得全部展示出来，因为设计的，不能改，上面要求。。。
好吧，现在开始优化~

（一定要说一句，我们项目的分页一般都是前端做的分页，感觉体验十分不佳，为什么就不好好的后端分页尼，因为说不过）

提示：以下是本篇文章正文内容，下面案例可供参考

一、卡顿的原因？

请求接口返回之后，关闭loading，但是界面并没有及时的关闭，这个问题，应该是有什么阻塞了，开始定位，发现，应该是界面中的一个长列表没有进行懒加载优化，导致渲染DOM，花费了太长的时间。然后kakaka

二、解决

1、滚动懒加载

代码如下（示例）：

<el-table
  id="lazyLoad":data="showDataL":max-height="temp_len_l">...</el-table>

/**
 * @desc table懒加载
 */constlazyLoading=()=>{// 这个地方就是为了得到滚动的那个元素，大家随意let dom = document.getElementById("lazyLoad");let scrollDOM = dom.querySelector(".el-scrollbar__wrap");
  
  scrollDOM.addEventListener("scroll",(v)=>{const scrollDistance = scrollDOM.scrollHeight - scrollDOM.scrollTop - scrollDOM.clientHeight;if(scrollDistance <=1){if(pagination.page < pagination.totalPage){//当前页数小于总页数就重新设置table的数据
        pagination.page++;//当前页数自增
        console.log("页面已经到达底部,可以重新设置table数据,现在是加载第 "+ pagination.page +" 页数据");
        showDataL.value = dataL.value.slice(0, pagination.page *20)}}});};onMounted(()=>{lazyLoading();});

2.官方

官方有一个虚拟表格，目前孩子啊测试阶段，大家也可以尝试一下，我就不贴出来了
点击进入

总结

提示：这里对文章进行总结：

长列表性能优化，主打一个减少DOM元素的一次性渲染加载