虚拟表格实现全解析
在数据展示越来越复杂的今天，大量数据的渲染就像是“满汉全席”——如果把所有菜肴一次性摆上桌，既浪费资源也让人眼花缭乱。幸运的是，我们有两种选择：
- 自己动手：通过二次封装 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 = true
axios.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 = 0
endIndex.value = data.value.length
}
}
console.log(virtualScrollView)
// 如果数据的长度小于限制的长度，有虚拟滚动元素则移除
if (virtualScrollView) {
scrollbarView.removeChild(virtualScrollView)
}
})
// 初始化虚拟滚动
function initVirtualScroll() {
// 如果没有超出限制，就不进行虚拟滚动
if (data.value.length <= limit) return
const { 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 已经为大家准备好了封装完善的虚拟表格组件。无论选择“自己动手”还是“直接用货”，关键在于理解虚拟滚动的原理，从而选出最适合你项目的方案。
希望这篇文章既能帮你学会如何实现高性能的虚拟表格，又能在你选择方案时提供足够的参考。如果你有任何疑问或优化建议，欢迎留言交流，让我们一起玩转大数据渲染的世界！