【性能优化】虚拟懒加载（下拉滚动加载长列表）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>
1
2
3
4
5
6

/**
 * @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();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.官方

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

---

总结

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

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