虚拟滚动1、umy-ui 插件2、el-table-virtual-scroll 插件✅️3、手写虚拟滚动实现方案封装成虚拟滚动组件用法Props暴露的方法限制 / 已知问题原理1、umy-ui 插件npm install umy-ui多次尝试一直没有生效2、el-table-virtual-scroll 插件✅️npm list el-table-virtual-scroll使用手册优点基于Element-UI的Table 组件开发的虚拟滚动组件和 el-table 组件 兼容性高缺点滚动不流畅严重时会出现短暂的白屏3、手写虚拟滚动实现方案参考网址 AI 帮忙参考实现优点滚动流畅不卡顿缺点只适合单纯的大数据量查询页面不支持勾选等功能具体见下方封装成虚拟滚动组件基于 position: absolute translateY phantom 占位方案的 el-table 虚拟滚动包装组件解决上万行数据渲染卡顿问题。!--../components/VirtualTable.vue-- template div classvirtual-table div classvirtual-scroll-container refscrollContainer :style{ height: height px } !-- 占位元素用于撑起滚动条 -- div classvirtual-scroll-phantom :style{ height: totalPhantomHeight px }/div !-- 内容容器通过 transform 控制偏移 -- div classvirtual-scroll-content :style{ transform: translateY( offset px) } el-table refelTable :datavisibleData stripe border stylewidth: 100%; min-width: 1200px :show-summaryshowSummary :summary-methodhandleSummary v-bind$attrs v-on$listeners slot/ /el-table /div /div /div /template script const ROW_HEIGHT_DEFAULT 48 const BUFFER_SIZE_DEFAULT 10 export default { name: VirtualTable, inheritAttrs: false, props: { // 总数据当前页全量 data: { type: Array, required: true }, // 容器高度px传数字 height: { type: Number, default: 520 }, // 固定行高 rowHeight: { type: Number, default: ROW_HEIGHT_DEFAULT }, // 缓冲行数 buffer: { type: Number, default: BUFFER_SIZE_DEFAULT }, // 是否显示合计行 showSummary: { type: Boolean, default: false }, // 自定义合计方法接收参数 ({ columns, data })data 为全量数据 // 不传则使用默认合计不做任何合计 summaryMethod: { type: Function, default: null } }, data() { return { visibleData: [], offset: 0, containerHeight: 0, visibleStartIdx: 0, throttleTimer: false } }, computed: { totalPhantomHeight() { return this.data.length * this.rowHeight } }, watch: { data() { this.$nextTick(() { this.initVirtualScroll() }) } }, mounted() { this.initVirtualScroll() }, beforeDestroy() { this.removeScrollListener() }, methods: { handleSummary(param) { if (this.summaryMethod) { // 传全量 data 给父组件自定义方法 return this.summaryMethod({ columns: param.columns, data: this.data }) } return [] }, initVirtualScroll() { const container this.$refs.scrollContainer if (!container) return container.scrollTop 0 this.offset 0 this.visibleStartIdx 0 this.containerHeight container.clientHeight const visibleRows Math.ceil(this.containerHeight / this.rowHeight) if (this.data.length visibleRows this.buffer) { this.visibleData [...this.data] this.offset 0 return } this.removeScrollListener() container.addEventListener(scroll, this.handleScroll, { passive: true }) this.updateVisibleData() }, handleScroll() { if (this.throttleTimer) return this.throttleTimer true requestAnimationFrame(() { this.throttleTimer false this.doUpdate() }) }, doUpdate() { const container this.$refs.scrollContainer if (!container) return const st container.scrollTop const total this.data.length if (total 0) { this.visibleData [] this.offset 0 return } const visibleCount Math.ceil(this.containerHeight / this.rowHeight) const bufferTotal visibleCount this.buffer * 2 const maxStart Math.max(0, total - bufferTotal) const rawStart Math.floor(st / this.rowHeight) const startIdx Math.min(maxStart, Math.max(0, rawStart - this.buffer)) const endIdx Math.min(total, startIdx bufferTotal) this.visibleData this.data.slice(startIdx, endIdx) this.visibleStartIdx startIdx this.offset startIdx * this.rowHeight }, updateVisibleData() { this.doUpdate() }, removeScrollListener() { this.throttleTimer false const container this.$refs.scrollContainer if (container) { container.removeEventListener(scroll, this.handleScroll) } }, // 根据当前可见数据的位置计算全局序号由父组件调用 realIndex($index) { return this.visibleStartIdx $index 1 } } } /script style scoped .virtual-table { width: 100%; } .virtual-scroll-container { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; } .virtual-scroll-container::-webkit-scrollbar { height: 8px; } .virtual-scroll-container::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 4px; } .virtual-scroll-phantom { position: absolute; left: 0; top: 0; right: 0; z-index: -1; } .virtual-scroll-content { position: absolute; left: 0; right: 0; top: 0; will-change: transform; } /style用法template virtual-table :datatableData row-height48 :buffer10 :height520 :show-summarytrue :summary-methodgetSummaries !-- el-table-column 和平时完全一样 -- el-table-column typeindex label序号 width55 aligncenter :indexcomputedIndex / el-table-column propname label姓名 min-width80 / el-table-column propsalary label薪资 min-width110 alignright template slot-scope{ row }¥{{ row.salary.toLocaleString() }}/template /el-table-column el-table-column label操作 width140 aligncenter template slot-scope{ row } el-button typetext sizesmall clickhandleEdit(row)编辑/el-button /template /el-table-column /virtual-table /template script import VirtualTable from /components/VirtualTable export default { components: { VirtualTable }, data() { return { tableData: [] } }, methods: { computedIndex($index) { // 序号全局偏移 当前索引 return this.$refs.vt ? this.$refs.vt.realIndex($index) : $index 1 }, getSummaries({ columns, data }) { // 合计方法data 为当前页全量数据 // ... } } } /scriptProps参数类型默认值说明dataArray必填当前页全量数据heightNumber520滚动容器高度pxrow-heightNumber48固定行高pxbufferNumber10可视区域外上下缓冲行数show-summaryBooleanfalse是否显示合计行summary-methodFunctionnull合计方法参数{ columns, data }data 为全量数据暴露的方法方法参数说明realIndex($index)Number传当前 visibleData 内的索引返回全局序号1-based限制 / 已知问题功能状态说明多选❌typeselection在切片数据上不准确固定列❌fixed列脱离文档流导致 translateY 错位排序✅el-table 原生排序在visibleData上操作合计行✅自定义summary-method传入全量 datael-table 原生 show-summary❌只能对 visibleData 求和不准确请使用summary-methodprop 传入自定义合计行展开❌展开行高度不确定破坏固定行高计算拖拽调整列宽✅el-table 原生支持原理外层容器overflow: autoheight固定phantom 占位 div 高度 data.length × row-height撑起真实滚动条高度内容 div 包裹 el-table通过translateY(offset)偏移到正确可视位置scroll 时计算 scrollTop → start/end 索引切片 data → visibleDatarequestAnimationFrame代替 setTimeout 节流同步浏览器渲染帧