虚拟表格实现全解析

在数据展示越来越复杂的今天，大量数据的渲染就像是“满汉全席”——如果把所有菜肴一次性摆上桌，既浪费资源也让人眼花缭乱。幸运的是，我们有两种选择：

• 自己动手：通过二次封装 Element Plus 的表格组件，实现虚拟滚动，只渲染用户视野中的数据，确保性能丝滑。
• 直接用货：直接使用 Element Plus 封装好的虚拟表格组件，省时省力，稳稳地解决问题

本文将主要讲解如何实现自己的虚拟表格，并对整个实现思路进行深度解析，同时友好地告诉你：如果懒得折腾，Element Plus 的组件已经为你准备好了完美方案！

1. 为什么需要虚拟表格？

当数据量较小时（例如 100 条以内），直接渲染 <el-table> 完全没有问题。但一旦数据量飙升到数千或上万条时，浏览器就可能因为渲染过多 DOM 节点而变得像卡住的老爷车。解决方案很简单：虚拟滚动。虚拟滚动技术只渲染当前可见区域的数据，而把其余数据“藏”起来，直到滚动时才动态加载，这就像只上桌当下你需要的菜，其余的保持在厨房中等待叫单

2. 实现思路与系统架构

我们采用基于 Element Plus 的二次封装方式，核心思路如下：

• 页面组件 index.vue
  负责生成数据并调用接口，将数据传递给虚拟表格组件。

• 虚拟表格组件 VirtualTable.vue
  在 Element Plus 的 <el-table> 基础上封装，接入自定义的虚拟滚动逻辑，动态调整渲染数据范围。

• 核心逻辑 useTakeVirtualScroll.ts
  这是“魔术师”所在，通过监听滚动和数据变化，根据当前视口计算出需要展示的数据区间，仅渲染这一部分数据，从而大幅提升性能。

温馨提示：虽然本文详细介绍了如何实现虚拟表格，但如果你只是想快速搭建产品，也可以直接使用 Element Plus 封装好的虚拟表格组件，它已经集成了很多优化功能，无需额外开发！

3. 代码实现详解

3.1 页面组件 index.vue

这个组件负责生成数据并模拟接口请求，然后将数据传递给我们的虚拟表格组件。看代码就知道，点击按钮就像是向厨房下单，数据开始滚滚而来：

<template><div><el-button type="primary" @click="handleGenerateData(100)" :disabled="loading">生成100条数据</el-button><el-button type="primary" @click="handleGenerateData(10000)" :disabled="loading">生成10000条数据</el-button><el-text type="danger">超过100条数据后，开启虚拟滚动</el-text></div><div class="virtual-table"><Table :data="data" :columns="column" :loading="loading" height="100%"><template #operation><el-link type="primary">编辑</el-link></template></Table></div>
</template><script setup lang="ts">
import Table from '@/components/VirtualTable/index.vue'
import { column } from './ts/column'
import axios from 'axios'
import { ref } from 'vue'
const data = ref([])const loading = ref(false)
// 模拟接口请求
function handleGenerateData(num: number) {loading.value = trueaxios.post('http://localhost:8050/generateData', { num }).then(res => {if (res.data.message === 'success') {data.value = res.data.data}}).finally(() => {loading.value = false})
}
</script><style scoped>
.virtual-table {width: 100%;height: calc(100% - 32px);padding-top: 10px;box-sizing: border-box;
}
</style>

3.2 虚拟表格组件 VirtualTable.vue

在这个组件中，我们利用 Element Plus 的 <el-table>，并引入 useTakeVirtualScroll 钩子来实现虚拟滚动。简而言之，它只负责展示当前可见的数据：

<template><el-table :data="filterData" v-loading="loading" v-bind="$attrs" @scroll="handleScroll"><el-table-column v-for="column in columns" :key="column.prop" v-bind="column"><template v-if="column.slot" #default="{ row }"><slot :name="column.slot" :row="row" /></template></el-table-column></el-table>
</template><script setup lang="ts">
import { computed } from 'vue'
import type { PropType } from 'vue'
import type { Column } from '@/views/VirtualTable/ts/column'
import { useTakeVirtualScroll } from '@/hooks/useTavkeVirtualScroll'
const props = defineProps({data: {type: Array,required: true,default: () => []},columns: {type: Array as PropType<Column[]>,required: true,default: () => []},loading: {type: Boolean,default: false},// 限制多少条后开启虚拟滚动limit: {type: Number,default: 100}
})
const data = computed(() => props.data)
const { filterData, handleScroll } = useTakeVirtualScroll(data, props.limit)</script><style scoped>
::v-deep(.el-scrollbar__view .el-table__body) {position: sticky;top: 0;left: 0;
}
</style>

3.3 核心逻辑：虚拟滚动钩子 useTakeVirtualScroll.ts

这部分代码正是“幕后黑手”，它负责监听滚动事件和数据变化，根据当前滚动位置计算出需要展示的数据区间。代码精妙地保证了只渲染用户可见部分：

import { ref, watch, nextTick, computed } from 'vue'
import { useEventListener, useDebounceFn } from '@vueuse/core'
import type { Ref } from 'vue'type FunctionType = (data: Ref<any[]>,limit: number,
) => { filterData: Ref<any[]>; handleScroll: (data: { scrollTop: number }) => void }export const useTakeVirtualScroll: FunctionType = (data, limit) => {const startIndex = ref(0) // 起始索引const endIndex = ref(0) // 结束索引const rowHeight = ref(42) // 行高// 计算过滤后的数据const filterData = computed(() => data.value.slice(startIndex.value, endIndex.value))// 监听数据变化watch(data, async () => {const { tableView, virtualScrollView, scrollbarView } = getElement()if (data.value.length) {tableView.scrollTo(0, 0)// 如果数据的长度大于限制的长度，则初始化虚拟滚动if (data.value.length > limit) {await nextTick()initVirtualScroll()return} else {startIndex.value = 0endIndex.value = data.value.length}}console.log(virtualScrollView)// 如果数据的长度小于限制的长度，有虚拟滚动元素则移除if (virtualScrollView) {scrollbarView.removeChild(virtualScrollView)}})// 初始化虚拟滚动function initVirtualScroll() {// 如果没有超出限制，就不进行虚拟滚动if (data.value.length <= limit) returnconst { tableView, virtualScrollView, scrollbarView } = getElement()const tableRow = scrollbarView.querySelector('.el-table__row') as HTMLElement // 获取表格行rowHeight.value = tableRow?.clientHeight || 42 // 获取表格行高const tableViewHeight = tableView?.clientHeight // 获取表格可视窗口的高度const virtualScrollHeight = rowHeight.value * data.value.length // 根据数组的长度来计算表格需要滚动的虚拟高度// 计算当前滚动到的行索引以及可视行数setIndex(Math.floor(tableView.scrollTop / rowHeight.value), Math.ceil(tableViewHeight / rowHeight.value))// 如果存在虚拟滚动视图，则更新高度if (virtualScrollView) {virtualScrollView.style.height = `${virtualScrollHeight - tableViewHeight}px`return}// 创建一个元素const fragment = document.createDocumentFragment()// 创建一个虚拟高度的元素const virtualScrollViewElement = document.createElement('div')virtualScrollViewElement.classList.add('virtual-scroll-view')// 设置虚拟高度的元素高度需要减去表格的可视化的高度virtualScrollViewElement.style.height = `${virtualScrollHeight - tableViewHeight}px`fragment.appendChild(virtualScrollViewElement)// 将虚拟高度的元素添加到表格中scrollbarView.appendChild(fragment)}// 处理滚动function handleScroll({ scrollTop }: { scrollTop: number }) {if (data.value.length <= limit) {return}const { tableView } = getElement()const tableViewHeight = tableView?.clientHeight // 获取表格可视窗口的高度// 计算当前滚动到的行索引以及可视行数setIndex(Math.floor(scrollTop / rowHeight.value), Math.ceil(tableViewHeight / rowHeight.value))}// 获取想要的元素function getElement() {const tableView = document.querySelector('.el-scrollbar__wrap') as HTMLElement // 获取滚动容器const scrollbarView = document.querySelector('.el-scrollbar__view') as HTMLElement // 获取滚动视图const virtualScrollView = scrollbarView.querySelector('.virtual-scroll-view') as HTMLElement // 获取虚拟滚动视图return { tableView, virtualScrollView, scrollbarView }}// 设置索引function setIndex(start: number, end: number) {startIndex.value = Math.max(0, start)endIndex.value = Math.min(data.value.length, start + end)}const debouncedFn = useDebounceFn(initVirtualScroll, 100)useEventListener(window, 'resize', debouncedFn)return { filterData, handleScroll }
}

细解析：

• 数据截取策略

  • 核心变量：startIndex 与 endIndex 分别定义了当前可见数据的起始与结束位置；rowHeight 则表示每一行的高度。
  • filterData 计算属性：借助 Vue 的响应式特性，filterData 始终返回 data 数组中从 startIndex 到 endIndex 的部分，从而保证页面只渲染用户当前能看到的数据。

• 数据监听与初始化

  • watch(data, async () => { ... })：每当数据发生变化时，先等待 DOM 更新（通过 nextTick()），再判断数据量是否超过设定阈值。
  • 若数据量超过 limit，则调用 initVirtualScroll() 进行初始化；否则直接显示全部数据。
  • 这种机制就像在超市里：当货架上的商品数量不多时，顾客可以一目了然；而一旦商品过多，则分区促销，只展示一部分热销品。

• 初始化虚拟滚动

  • initVirtualScroll()：首次加载或数据更新时，通过查询 DOM 获取表格容器（.el-scrollbar__wrap）的高度，根据当前滚动条位置计算出起始行和可见行数，并调用 setIndex() 更新数据区间。
  • 这确保了页面一加载时，就只显示当前视口内的数据，而不会一次性加载所有数据。

• 滚动事件处理

  • handleScroll({ scrollTop })：每次用户滚动时，实时根据新的 scrollTop 值重新计算可见区域，并更新 startIndex 和 endIndex。
  • 这样，无论用户如何快速滚动，页面始终只渲染当前视口内的数据，保证流畅的滚动体验。

• 更新显示数据区间

  • setIndex(start, end)：确保更新后的 startIndex 不低于 0，endIndex 不超过数据总量。
  • 这一步防止了由于计算误差导致索引越界的情况，保证数据截取始终正确。

• 防抖优化

  • useEventListener(window, 'resize', useDebounceFn(initVirtualScroll, 100))：在窗口大小变化时，防止因频繁触发初始化函数而带来的性能损耗。
  • 防抖函数确保只有在调整停止一段时间后才执行初始化，相当于给“表格魔术师”一点缓冲时间，避免过度“表演”。

4. 总结

本文深入解析了如何基于 Element Plus 的 <el-table> 组件，通过二次封装实现虚拟滚动表格。重点在于核心逻辑 useTakeVirtualScroll.ts：

• 利用 Vue 的响应式和 computed 属性，仅渲染用户当前视口内的数据。
• 通过监听数据变化与滚动事件，动态计算并更新显示区间，确保页面渲染始终高效流畅。
• 防抖优化进一步保障了在窗口调整等情况下的稳定性。

当然，如果你不想自己重造轮子，Element Plus 已经为大家准备好了封装完善的虚拟表格组件。无论选择“自己动手”还是“直接用货”，关键在于理解虚拟滚动的原理，从而选出最适合你项目的方案。

希望这篇文章既能帮你学会如何实现高性能的虚拟表格，又能在你选择方案时提供足够的参考。如果你有任何疑问或优化建议，欢迎留言交流，让我们一起玩转大数据渲染的世界！