虛擬表格實現全解析

在數據展示越來越復雜的今天，大量數據的渲染就像是“滿漢全席”——如果把所有菜肴一次性擺上桌，既浪費資源也讓人眼花繚亂。幸運的是，我們有兩種選擇：

自己動手：通過二次封裝 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))：在窗口大小變化時，防止因頻繁觸發初始化函數而帶來的性能損耗。
- 防抖函數確保只有在調整停止一段時間后才執行初始化，相當于給“表格魔術師”一點緩沖時間，避免過度“表演”。