VXE Table 虚拟滚动：万级数据毫秒级渲染的性能优化实战

作者：忆笙智云官方｜发布时间：2026-04-19 10:00 ｜更新时间：2026-06-19 10:00

VXE Table虚拟滚动大数据量性能优化

引言

在企业级后台管理系统中，大数据量表格的渲染性能一直是前端开发的痛点。当表格数据超过数千行时，传统DOM渲染方式会导致页面卡顿、内存占用飙升，严重影响用户体验。VXE Table通过虚拟滚动技术，只渲染可视区域内的DOM节点，将万级数据量的渲染性能提升到毫秒级响应。

本文将深入分析VXE Table虚拟滚动原理，探讨大数据量表格渲染的性能优化策略，并与Element Plus Table进行对比分析。

一、虚拟滚动核心原理

1.1 传统渲染 vs 虚拟滚动

flowchart LR
    subgraph 传统渲染
        direction TB
        A1[10000条数据] --> A2[创建10000个DOM节点]
        A2 --> A3[浏览器渲染10000行]
        A3 --> A4[内存占用: ~500MB]
        A4 --> A5[首屏时间: 3-5秒]
    end

    subgraph 虚拟滚动
        direction TB
        B1[10000条数据] --> B2[仅创建可视区DOM]
        B2 --> B3[约30-50个DOM节点]
        B3 --> B4[内存占用: ~50MB]
        B4 --> B5[首屏时间: <100ms]
    end

    style A5 fill:#f44336,color:#fff
    style B5 fill:#4CAF50,color:#fff

1.2 虚拟滚动工作流程

sequenceDiagram
    participant User as 用户滚动
    participant VS as 虚拟滚动引擎
    participant Data as 数据源
    participant DOM as DOM渲染

    User->>VS: 滚动事件触发
    VS->>VS: 计算当前滚动偏移量
    VS->>VS: 计算可视区域起止索引
    VS->>Data: 截取可视区域数据
    Data-->>VS: 返回可见行数据
    VS->>DOM: 更新可见行DOM
    VS->>DOM: 调整上下占位元素高度
    Note over VS,DOM: 上下占位元素撑起滚动条高度
    DOM-->>User: 界面更新

1.3 虚拟滚动核心算法

/**
 * 虚拟滚动核心计算逻辑
 */
interface VirtualScrollOptions {
  /** 总数据量 */
  total: number
  /** 每行高度（固定高度模式） */
  rowHeight: number
  /** 容器可视高度 */
  viewportHeight: number
  /** 上下缓冲区行数 */
  bufferSize: number
}

interface VirtualScrollResult {
  /** 起始索引 */
  startIndex: number
  /** 结束索引 */
  endIndex: number
  /** 上方占位高度 */
  topPadHeight: number
  /** 下方占位高度 */
  bottomPadHeight: number
  /** 可视区域数据 */
  visibleData: any[]
}

function calculateVirtualScroll(
  scrollTop: number,
  options: VirtualScrollOptions
): Omit<VirtualScrollResult, 'visibleData'> {
  const { total, rowHeight, viewportHeight, bufferSize } = options

  // 计算可视区域能显示的行数
  const visibleCount = Math.ceil(viewportHeight / rowHeight)

  // 计算起始索引（考虑缓冲区）
  let startIndex = Math.floor(scrollTop / rowHeight) - bufferSize
  startIndex = Math.max(0, startIndex)

  // 计算结束索引（考虑缓冲区）
  let endIndex = startIndex + visibleCount + bufferSize * 2
  endIndex = Math.min(total, endIndex)

  // 计算占位高度
  const topPadHeight = startIndex * rowHeight
  const bottomPadHeight = (total - endIndex) * rowHeight

  return { startIndex, endIndex, topPadHeight, bottomPadHeight }
}

二、VXE Table使用实践

2.1 基础虚拟滚动配置

<template>
  <vxe-table
    ref="tableRef"
    :data="tableData"
    :row-config="{ height: 48 }"
    height="600"
    :scroll-y="{ enabled: true, gt: 100 }"
    :loading="loading"
    show-overflow
    highlight-hover-row
  >
    <vxe-column type="seq" title="序号" width="60" />
    <vxe-column field="username" title="用户名" min-width="120" />
    <vxe-column field="nickname" title="昵称" min-width="120" />
    <vxe-column field="email" title="邮箱" min-width="180" />
    <vxe-column field="phone" title="手机号" min-width="140" />
    <vxe-column field="status" title="状态" width="100">
      <template #default="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
          {{ row.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </template>
    </vxe-column>
    <vxe-column field="createTime" title="创建时间" width="180" />
    <vxe-column title="操作" width="180" fixed="right">
      <template #default="{ row }">
        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const tableData = ref([])
const loading = ref(false)

/** 加载大数据量 */
const loadData = async () => {
  loading.value = true
  try {
    const { data } = await fetchLargeDataApi()
    tableData.value = data
  } finally {
    loading.value = false
  }
}

onMounted(loadData)
</script>

2.2 关键配置项说明

/**
 * VXE Table虚拟滚动核心配置
 */
interface ScrollYConfig {
  /** 是否启用虚拟滚动 */
  enabled: boolean
  /** 触发虚拟滚动的数据量阈值，超过此值启用 */
  gt: number
  /** 指定行高（固定行高模式下必填） */
  oSize?: number
  /** 滚动到顶部时的回调 */
  scrollToTopCallBack?: () => void
}

/**
 * 行配置
 */
interface RowConfig {
  /** 行高度（像素），虚拟滚动必须指定 */
  height?: number
  /** 行主键字段，提升渲染性能 */
  keyField?: string
  /** 是否启用悬停高亮 */
  isHover?: boolean
  /** 是否启用当前行高亮 */
  isCurrent?: boolean
}

2.3 动态行高虚拟滚动

当行高不固定时（如含展开行、多行文本），需使用动态行高模式：

<template>
  <vxe-table
    :data="tableData"
    height="600"
    :scroll-y="{ enabled: true, gt: 50 }"
    :row-config="{ height: 'auto', keyField: 'id' }"
  >
    <!-- 动态行高列 -->
    <vxe-column field="description" title="描述" min-width="200">
      <template #default="{ row }">
        <div class="desc-cell" :style="{ maxHeight: row.expanded ? 'none' : '48px' }">
          {{ row.description }}
        </div>
      </template>
    </vxe-column>
  </vxe-table>
</template>

三、性能优化策略

3.1 优化策略全景图

flowchart TD
    A[大数据量表格性能优化] --> B[渲染层优化]
    A --> C[数据层优化]
    A --> D[交互层优化]

    B --> B1[虚拟滚动]
    B --> B2[固定行高]
    B --> B3[减少嵌套组件]
    B --> B4[避免复杂slot]

    C --> C1[分页加载]
    C --> C2[懒加载]
    C --> C3[数据冻结]
    C --> D1[防抖滚动]
    D --> D2[延迟渲染]
    D --> D3[按需格式化]

    style A fill:#4CAF50,color:#fff
    style B1 fill:#2196F3,color:#fff
    style C1 fill:#FF9800,color:#fff

3.2 固定行高 vs 动态行高

维度	固定行高	动态行高
滚动计算	O(1) 直接索引定位	O(n) 需遍历计算位置
滚动流畅度	极佳	良好（需额外计算）
内存占用	低	中等（需缓存行高）
适用场景	数据表格、列表	含展开、富文本的表格
推荐做法	优先使用固定行高	必要时才使用动态行高

3.3 列渲染优化

<template>
  <vxe-table
    :data="tableData"
    height="600"
    :scroll-y="{ enabled: true, gt: 100 }"
    :row-config="{ height: 48, keyField: 'id' }"
    :column-config="{ resizable: true }"
    show-overflow
  >
    <!-- ✅ 推荐：使用 show-overflow 文本溢出省略 -->
    <vxe-column field="name" title="名称" min-width="150" show-overflow="tooltip" />

    <!-- ✅ 推荐：简单内容直接使用 formatter -->
    <vxe-column field="status" title="状态" width="100"
      :formatter="({ cellValue }) => cellValue === 1 ? '启用' : '禁用'" />

    <!-- ⚠️ 注意：复杂slot会增加渲染开销 -->
    <vxe-column field="operation" title="操作" width="200">
      <template #default="{ row }">
        <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

3.4 数据加载优化

/**
 * 大数据量分批加载策略
 * 避免一次性渲染大量数据导致卡顿
 */
export function useBatchLoad<T>(
  fetchFn: (page: number, size: number) => Promise<{ records: T[]; total: number }>,
  batchSize: number = 1000
) {
  const allData = ref<T[]>([]) as Ref<T[]>
  const loading = ref(false)
  const total = ref(0)

  /** 分批加载数据 */
  const loadAll = async () => {
    loading.value = true
    try {
      let page = 1
      let hasMore = true
      while (hasMore) {
        const { data } = await fetchFn(page, batchSize)
        allData.value.push(...data.records)
        total.value = data.total
        hasMore = allData.value.length < data.total
        page++

        // 让浏览器有机会渲染，避免长时间阻塞
        await nextTick()
      }
    } finally {
      loading.value = false
    }
  }

  return { allData, loading, total, loadAll }
}

四、VXE Table vs Element Plus Table对比

4.1 功能对比

flowchart LR
    subgraph VXE Table
        direction TB
        A1[✅ 虚拟滚动] --- A2[✅ 树形数据]
        A2 --- A3[✅ 单元格编辑]
        A3 --- A4[✅ 合并单元格]
        A4 --- A5[✅ 导入导出]
        A5 --- A6[✅ 键盘导航]
        A6 --- A7[✅ 可编辑表格]
    end

    subgraph Element Plus Table
        direction TB
        B1[❌ 无虚拟滚动] --- B2[✅ 树形数据]
        B2 --- B3[❌ 无单元格编辑]
        B3 --- B4[✅ 合并单元格]
        B4 --- B5[❌ 无内置导出]
        B5 --- B6[❌ 无键盘导航]
        B6 --- B7[❌ 无可编辑表格]
    end

    style A1 fill:#4CAF50,color:#fff
    style B1 fill:#f44336,color:#fff

4.2 性能对比

测试场景	VXE Table	Element Plus Table
1000行渲染时间	~50ms	~200ms
5000行渲染时间	~80ms	~1200ms
10000行渲染时间	~100ms	~3500ms
50000行渲染时间	~150ms	页面卡死
1000行滚动FPS	60fps	55fps
10000行滚动FPS	58fps	15-20fps
内存占用(10000行)	~80MB	~450MB

4.3 选型建议

flowchart TD
    A{表格数据量?} -->|< 500行| B[Element Plus Table]
    A -->|500-5000行| C{是否需要编辑?}
    A -->|> 5000行| D[VXE Table]

    C -->|是| D
    C -->|否| E{是否需要虚拟滚动?}
    E -->|是| D
    E -->|否| B

    D --> F{是否需要复杂功能?}
    F -->|树形/合并/编辑| G[VXE Table完整版]
    F -->|简单列表展示| H[VXE Table基础版]

    style D fill:#4CAF50,color:#fff
    style B fill:#2196F3,color:#fff

五、VXE Table高级功能

5.1 树形数据虚拟滚动

<template>
  <vxe-table
    :data="treeData"
    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
    :scroll-y="{ enabled: true, gt: 100 }"
    height="600"
    :row-config="{ height: 48, keyField: 'id' }"
  >
    <vxe-column field="name" title="名称" tree-node />
    <vxe-column field="code" title="编码" />
    <vxe-column field="type" title="类型" />
  </vxe-table>
</template>

5.2 可编辑表格

<template>
  <vxe-table
    ref="editTableRef"
    :data="tableData"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
    :scroll-y="{ enabled: true, gt: 100 }"
    height="600"
    :row-config="{ height: 48, keyField: 'id' }"
  >
    <vxe-column field="name" title="名称" :edit-render="{ name: 'input' }" />
    <vxe-column field="age" title="年龄" :edit-render="{ name: 'input' }" />
    <vxe-column field="role" title="角色"
      :edit-render="{ name: 'select', options: roleOptions }" />
  </vxe-table>
</template>

5.3 导入导出

/**
 * VXE Table数据导出
 */
const handleExport = () => {
  const $table = tableRef.value
  if ($table) {
    $table.exportData({
      type: 'xlsx',
      filename: '用户数据',
      sheetName: '用户列表',
      isHeader: true,
      data: tableData.value
    })
  }
}

六、常见性能陷阱与解决方案

6.1 性能陷阱清单

陷阱	影响	解决方案
未指定行高	虚拟滚动失效	设置`row-config.height`
大量复杂slot	渲染耗时增加	使用`formatter`替代slot
响应式数据过大	代理开销	使用`shallowRef`或`markRaw`
频繁更新数据	全量diff	使用`keyField`优化diff
列数过多	横向滚动卡顿	冻结关键列，减少可见列

6.2 响应式数据优化

import { shallowRef } from 'vue'

// ❌ 大数据量使用ref会导致深层代理开销
const tableData = ref(largeArray)

// ✅ 使用shallowRef避免深层响应式代理
const tableData = shallowRef(largeArray)

// 更新数据时重新赋值触发更新
const updateData = (newData) => {
  tableData.value = newData
}

结论与建议

核心优化要点

虚拟滚动是必须的：数据量超过500行时，务必启用虚拟滚动
固定行高优先：固定行高模式下虚拟滚动性能最优
keyField必设：设置行主键字段，提升diff和渲染性能
shallowRef优化：大数据量使用shallowRef避免深层代理开销
减少slot使用：简单展示优先使用formatter，减少组件实例创建

选型决策

Element Plus Table：适合数据量小（<500行）、功能简单的场景，与Element Plus生态无缝集成
VXE Table：适合大数据量、需要虚拟滚动、可编辑、导入导出等复杂表格场景