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

这篇具有很好参考价值的文章主要介绍了【性能优化】虚拟懒加载（下拉滚动加载长列表）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懒加载
 */
const lazyLoading = () => {
  // 这个地方就是为了得到滚动的那个元素，大家随意
  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();
});