vue 表格卡顿的最终解决方法，秒级渲染大数据量表格列表

在日常业务开发中当表格数据量达到数百甚至数千行时页面卡顿、滚动掉帧、白屏等现象频繁出现严重影响用户体验。vxe-table 从 4.19 以及 v3.21版本开始对虚拟滚动进行了深度优化——不仅在 Windows 和 macOS 上流畅支持触摸板、鼠标滚轮和键盘滚动更彻底解决了滚动白屏问题滚动体验丝滑如原生。虚拟滚动的核心原理虚拟滚动Virtual Scrolling的核心思想是只渲染可视区域内的行而非一次性渲染全部数据。当用户滚动时组件动态计算当前可视区域对应的数据范围仅创建和更新这些行对应的 DOM 节点。对于 10,000 行数据传统表格需要创建 10,000 个 DOM 节点而虚拟滚动只渲染约 20-30 个取决于可视区域高度性能提升达 99% 以上。vxe-table 4.19 和 v3.21 滚动体验全面升级从 4.19.0 和 v3.21 版本开始虚拟滚动引擎经过彻底重构带来了显著的体验提升优化项旧版本 4.194.19 版本触摸板滚动可能卡顿或白屏平滑流畅鼠标滚轮滚动偶尔掉帧丝滑跟手键盘滚动PgUp/PgDn可能闪烁稳定无闪烁快速滚动白屏概率较高几乎无白屏滚动惯性不支持支持依赖浏览器核心配置一行代码开启虚拟滚动通过 virtualYConfig 配置项即可启用纵向虚拟滚动代码通过 virtual-y-config.enabled 与 virtual-y-config.gt 组合开启其中 enabled 为总开关gt 是指当总行数大于指定行数时自动开启。virtualYConfig:{enabled:true,// 总开关启用虚拟滚动gt:0// 当数据行数超过该值时自动启用设为 0 表示始终启用}参数类型说明enabledBoolean虚拟滚动的总开关。设为 true 时启用false 时关闭。gtNumber阈值。当 data.length gt 时自动启用虚拟滚动。设为 0 表示无论数据量多少都启用推荐。templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({border:true,showOverflow:true,showHeaderOverflow:true,showFooterOverflow:true,height:1000,virtualYConfig:{enabled:true,gt:0},columns:[{type:seq,width:70},{field:name,title:Name},{field:nickname,title:Nickname},{field:role,title:Role},{field:sex,title:Sex},{field:age,title:Age},{field:date,title:date},{field:address,title:Address}],data:[]})// 模拟行数据constloadList(size200){constdataList[]for(leti0;isize;i){dataList.push({id:10000i,name:Testi,nickname:Namei,role:Developer,sex:男,age:18,date:2018-01-01,address:address})}gridOptions.datadataList}loadList(500)/script说明条件要求说明表格高度必须固定如 height: 500虚拟滚动需要知道可视区域高度以计算渲染范围。行高必须固定默认可通过 rowConfig.height 设置所有行高度需一致否则虚拟滚动无法正确计算滚动条高度。数据主键建议设置 rowConfig.keyField有助于组件准确追踪行数据特别是在动态更新时。如果表格高度不固定或行高不统一虚拟滚动将无法正常工作。横向虚拟滚动对于列数特别多的表格同样可以启用横向虚拟滚动virtualXConfig:{enabled:true,gt:0}同时启用纵向和横向虚拟滚动适用于超宽超大的数据表格如数百列 × 数万行。vxe-table 的虚拟滚动功能通过 virtualYConfig 一行配置即可开启让数千行数据的表格渲染达到秒级响应、滚动丝滑的效果。特别是 4.19 版本在滚动体验上的全面优化彻底解决了大数据量表格的性能痛点。https://table.vxeui.com