开启vxe-table的scrolly虚拟滚动并设固定height(如600)、gt阈值(如500)、itemsize匹配行高,关闭keep-source等冗余功能,配合后端分页,即可消除性能警告。

直接用 vxe-table 的 scrollY 配置开启虚拟滚动,就能消除“超长表格性能警告”,根本不需要手动拦截或 suppress 警告。关键不是屏蔽提示,而是让警告消失——它只在真实存在性能风险时才出现。
必须设固定高度
虚拟滚动依赖容器可计算的可视区域,所以 height 必须是具体数值(如 600),不能是 '100%' 或 auto。否则 vxe-table 无法确定渲染范围,就会触发警告并退回到全量渲染。
- 推荐写法:
<vxe-grid height="600" ...></vxe-grid>或<vxe-table height="500" ...></vxe-table> - 若需自适应,请用
ref+useElementSize动态绑定,避免 CSS 拉伸导致高度为 0
scrollY 启用与阈值设置
仅开启 enabled: true 不够,必须配合 gt(触发门槛)才能真正激活虚拟滚动逻辑。这个值应略大于你预期的“最小卡顿数据量”。
- 典型配置:
scrollY: { enabled: true, gt: 500, virtualize: true, itemSize: 48 } -
gt: 500表示:当总行数 ≥ 500 时,自动启用虚拟滚动;低于该值则走普通渲染,兼顾小数据时的简洁性 -
itemSize要和实际 CSS 行高严格一致(含 padding/border),否则滚动错位或白屏
关闭冗余渲染保护
vxe-table 默认开启 keep-source 和 highlight-hover-row 等增强功能,它们在大数据量下会加重计算负担,间接引发警告。
- 显式关闭非必要项:
keep-source: false、highlight-hover-row: false、show-overflow: false - 如果不需要动态序号列,去掉
seq-config可减少每行的响应式开销 - 列定义中避免在
formatter里做复杂计算或请求,改用预处理后的字段
服务端配合:别让前端扛全量
即使开了虚拟滚动,若 proxyConfig.ajax.query 每次仍返回全部 10 万条数据,浏览器内存照样爆。真正的优雅是前后端协同分片。
- 确保后端接口支持分页参数(如
offset/limit或page/pageSize) - 在
proxyConfig中透传滚动位置,例如:query: ({ scrollContext }) => api.list({ offset: scrollContext?.startIndex || 0, limit: 50 }) - 搭配
scrollY.bufferSize(建议 3–8)控制预加载行数,避免频繁请求










