成都html5网站设计,一个网络空间如何做两个网站,做百度联盟用什么做网站,天津南昌网站建设在数据展示越来越复杂的今天#xff0c;大量数据的渲染就像是“满汉全席”——如果把所有菜肴一次性摆上桌#xff0c;既浪费资源也让人眼花缭乱。幸运的是#xff0c;我们有两种选择#xff1a;
自己动手#xff1a;通过二次封装 Element Plus 的表格组件#xff0c;实…在数据展示越来越复杂的今天大量数据的渲染就像是“满汉全席”——如果把所有菜肴一次性摆上桌既浪费资源也让人眼花缭乱。幸运的是我们有两种选择
自己动手通过二次封装 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
这个组件负责生成数据并模拟接口请求然后将数据传递给我们的虚拟表格组件。看代码就知道点击按钮就像是向厨房下单数据开始滚滚而来
templatedivel-button typeprimary clickhandleGenerateData(100) :disabledloading生成100条数据/el-buttonel-button typeprimary clickhandleGenerateData(10000) :disabledloading生成10000条数据/el-buttonel-text typedanger超过100条数据后开启虚拟滚动/el-text/divdiv classvirtual-tableTable :datadata :columnscolumn :loadingloading height100%template #operationel-link typeprimary编辑/el-link/template/Table/div
/templatescript setup langts
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})
}
/scriptstyle 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 钩子来实现虚拟滚动。简而言之它只负责展示当前可见的数据
templateel-table :datafilterData v-loadingloading v-bind$attrs scrollhandleScrollel-table-column v-forcolumn in columns :keycolumn.prop v-bindcolumntemplate v-ifcolumn.slot #default{ row }slot :namecolumn.slot :rowrow //template/el-table-column/el-table
/templatescript setup langts
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 PropTypeColumn[],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)/scriptstyle 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 vuetype FunctionType (data: Refany[],limit: number,
) { filterData: Refany[]; 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}pxreturn}// 创建一个元素const fragment document.createDocumentFragment()// 创建一个虚拟高度的元素const virtualScrollViewElement document.createElement(div)virtualScrollViewElement.classList.add(virtual-scroll-view)// 设置虚拟高度的元素高度需要减去表格的可视化的高度virtualScrollViewElement.style.height ${virtualScrollHeight - tableViewHeight}pxfragment.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 不低于 0endIndex 不超过数据总量。这一步防止了由于计算误差导致索引越界的情况保证数据截取始终正确。 防抖优化 useEventListener(window, resize, useDebounceFn(initVirtualScroll, 100))在窗口大小变化时防止因频繁触发初始化函数而带来的性能损耗。防抖函数确保只有在调整停止一段时间后才执行初始化相当于给“表格魔术师”一点缓冲时间避免过度“表演”。
4. 总结
本文深入解析了如何基于 Element Plus 的 el-table 组件通过二次封装实现虚拟滚动表格。重点在于核心逻辑 useTakeVirtualScroll.ts
利用 Vue 的响应式和 computed 属性仅渲染用户当前视口内的数据。通过监听数据变化与滚动事件动态计算并更新显示区间确保页面渲染始终高效流畅。防抖优化进一步保障了在窗口调整等情况下的稳定性。
当然如果你不想自己重造轮子Element Plus 已经为大家准备好了封装完善的虚拟表格组件。无论选择“自己动手”还是“直接用货”关键在于理解虚拟滚动的原理从而选出最适合你项目的方案。
希望这篇文章既能帮你学会如何实现高性能的虚拟表格又能在你选择方案时提供足够的参考。如果你有任何疑问或优化建议欢迎留言交流让我们一起玩转大数据渲染的世界
