【资料图】

情景：后端一次性传了10000条数据（假设存在），需要前端展示。若真的一次性全部展示出来性能消耗大，一万条数据不明显，十万条呢，肯定会导致页面卡顿的。实现思路：使用虚拟列表实现，其实和分页类似，就是前端自己裁剪数据，一次性值展现固定量的数据。如果使用element-plus可以直接使用他们的虚拟化表格，这里就不过多展示了。布局：三个div,大的容器，大的放滚动事件，里面放两个小的div，一个用来撑开容器，另一个作为可视区域。步骤1：监听滚动事件，在里面获取scrollTop，计算开始位置，开始位置其实就是scrollTop/height。步骤2：按长度切割数组，获取需要渲染的内容。

<script setup lang="ts">import { computed, onMounted, reactive, ref } from "vue";let start = ref(0),  size = ref(10),  height = ref(20),  scrollTop = ref(0),  totalList = reactive