虚拟列表

在实际工作中，会要求表格渲染10万条数据的需求，而在vue中使用的elementUi中的el-table表格是渲染1000条数据，如果一下子渲染了10万条数据，会造成页面卡顿。这个就需要使用虚拟滚动了，刚开始先渲染可视化区域，根据滚动条往下滑，再往下渲染数据。完整代码如下：

export default { name: "vntable",}import { ref, computed, onMounted, onUnmounted } from "vue"

const props = defineProps({ tableHeight: { type: String | Number, default: "300px" }})

const dataList = ref([])for (let i = 0; i < 200000; i++) { dataList.value.push({ name: "姓名+" + i })}

const itemHeight = 48 //默认行高const count = 16//条数const start = ref(0)//开始索引const end = ref(count)//结束索引const vntableRef = ref(null)//elementconst startOffset = ref(0)let dom;//列表数据const tableData = computed(() => { if (dom) { dom.querySelector(".el-table__body").style.transform = getTransForm.value } return dataList.value.slice(start.value, end.value)})

const getTransForm = computed(() => {//偏移量 return `translate3d(0,${startOffset.value}px,0)`})

const clientHeightTable = computed(() => { if (typeof props.tableHeight === "string") { return `calc(100vh - ${props.tableHeight})` } return `calc(100vh - ${props.tableHeight}px)`})

const len = computed(() => {//总长度 return dataList.value.length})const tableHeightTop = computed(() => {//总高度,+px 有大的滚动条，这是固定高度，不加px，不是固定高度 return len.value * itemHeight - itemHeight + "px"})

const onScrollChange = () => { window.requestAnimationFrame(() => { const scrollTop = dom.scrollTop

start.value = Math.floor(scrollTop / itemHeight) end.value = start.value + count

startOffset.value = scrollTop - (scrollTop % itemHeight) startOffset.value = startOffset.value - itemHeight > 0 ? startOffset.value - itemHeight : 0 })

}

onMounted(() => { dom = vntableRef.value.bodyWrapper console.log("dom", dom); const newDiv = document.createElement("div") newDiv.style.height = tableHeightTop.value dom.querySelector(".el-table__body").style.position = "absolute"dom.appendChild(newDiv)//撑开高度 dom.addEventListener("scroll", onScrollChange)})

onUnmounted(() => { dom.removeEventListener("scroll", onScrollChange)})

window.requestAnimationFrame()是执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。