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

在日常业务开发中，当表格数据量达到数百甚至数千行时，页面卡顿、滚动掉帧、白屏等现象频繁出现，严重影响用户体验。vxe-table 从 4.19+ 版本开始，对虚拟滚动进行了深度优化——不仅在 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.19）	4.19+ 版本
触摸板滚动	可能卡顿或白屏	平滑流畅
鼠标滚轮滚动	偶尔掉帧	丝滑跟手
键盘滚动（PgUp/PgDn）	可能闪烁	稳定无闪烁
快速滚动	白屏概率较高	几乎无白屏
滚动惯性	不支持	支持（依赖浏览器）

核心配置：一行代码开启虚拟滚动

通过 virtualYConfig 配置项即可启用纵向虚拟滚动：

代码

通过 virtual-y-config.enabled 与 virtual-y-config.gt 组合开启，其中 enabled 为总开关，gt 是指当总行数大于指定行数时自动开启。

virtualYConfig: {
  enabled: true,   // 总开关，启用虚拟滚动
  gt: 0            // 当数据行数超过该值时自动启用；设为 0 表示始终启用
}

参数	类型	说明
enabled	Boolean	虚拟滚动的总开关。设为 true 时启用，false 时关闭。
gt	Number	阈值。当 data.length > gt 时自动启用虚拟滚动。设为 0 表示无论数据量多少都启用（推荐）。

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  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: []
})

// 模拟行数据
const loadList = (size = 200) => {
  const dataList = []
  for (let i = 0; i < size; i++) {
    dataList.push({
      id: 10000 + i,
      name: 'Test' + i,
      nickname: 'Name' + i,
      role: 'Developer',
      sex: '男',
      age: 18,
      date: '2018-01-01',
      address: 'address'
    })
  }
  gridOptions.data = dataList
}

loadList(500)
</script>

说明

条件	要求	说明
表格高度	必须固定（如 height: 500）	虚拟滚动需要知道可视区域高度，以计算渲染范围。
行高	必须固定（默认可通过 rowConfig.height 设置）	所有行高度需一致，否则虚拟滚动无法正确计算滚动条高度。
数据主键	建议设置 rowConfig.keyField	有助于组件准确追踪行数据，特别是在动态更新时。

如果表格高度不固定或行高不统一，虚拟滚动将无法正常工作。

横向虚拟滚动

对于列数特别多的表格，同样可以启用横向虚拟滚动：

virtualXConfig: {
  enabled: true,
  gt: 0
}

同时启用纵向和横向虚拟滚动，适用于超宽超大的数据表格（如数百列 × 数万行）。

vxe-table 的虚拟滚动功能通过 virtualYConfig 一行配置即可开启，让数千行数据的表格渲染达到秒级响应、滚动丝滑的效果。特别是 4.19+ 版本在滚动体验上的全面优化，彻底解决了大数据量表格的性能痛点。

https://table.vxeui.com