版本： vxe-table 4.18 + vxe-pc-ui 4.13   官网： vxetable.cn

VxeTable 是一款高性能表格组件，支持虚拟滚动（十万行不卡顿）、可编辑单元格、行/列拖拽、固定表头/列等复杂场景，适合数据量大或交互复杂的表格需求。

与 el-table 的选择建议：

• 数据量 < 1000 行、交互简单 → el-table（代码更简洁）
• 数据量大（> 1000 行）、需要虚拟滚动或可编辑单元格 → vxe-table

注册

在 main.ts 中全量注册（Nebula 子应用已默认配置）：

import VxeUIBase from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/es/style.css'

app.use(VxeUIBase)
app.use(VxeUITable)

---

基础表格

<template>
  <vxe-table
    ref="tableRef"
    :data="tableData"
    :loading="loading"
    border
    stripe
    highlight-hover-row
    height="600"
  >
    <vxe-column type="seq" title="#" width="60" />
    <vxe-column field="username" title="用户名" min-width="120" />
    <vxe-column field="phone" title="手机号" width="130" />
    <vxe-column field="status" title="状态" width="90">
      <template #default="{ row }">
        <el-tag :type="row.status === 0 ? 'success' : 'danger'">
          {{ row.status === 0 ? '正常' : '禁用' }}
        </el-tag>
      </template>
    </vxe-column>
    <vxe-column title="操作" width="140" fixed="right">
      <template #default="{ row }">
        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" link @click="handleDelete(row.id)">删除</el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

---

虚拟滚动（大数据量）

<template>
  <vxe-table
    :data="bigData"
    height="500"
    :virtual-y-config="{ enabled: true, gt: 50 }"  <!-- 超过 50 行启用虚拟滚动 -->
    :scroll-y="{ enabled: true }"
  >
    <vxe-column field="id" title="ID" width="80" />
    <vxe-column field="name" title="名称" min-width="200" />
    <!-- 更多列 ... -->
  </vxe-table>
</template>

注意： 启用虚拟滚动时，height 必须明确设置（不能为 auto）。

---

复选框选择行

<template>
  <div>
    <el-button type="danger" :disabled="!selectedRows.length" @click="batchDelete">
      批量删除（{{ selectedRows.length }}）
    </el-button>
    <vxe-table
      ref="tableRef"
      :data="tableData"
      @checkbox-change="onCheckboxChange"
      @checkbox-all="onCheckboxChange"
    >
      <vxe-column type="checkbox" width="50" />
      <vxe-column field="username" title="用户名" />
    </vxe-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { VxeTableInstance } from 'vxe-table'

const tableRef = ref<VxeTableInstance>()
const selectedRows = ref<any[]>([])

function onCheckboxChange() {
  selectedRows.value = tableRef.value?.getCheckboxRecords() ?? []
}

async function batchDelete() {
  const ids = selectedRows.value.map(r => r.id)
  await batchDeleteApi(ids)
  ElMessage.success('删除成功')
  loadData()
}
</script>

---

可编辑单元格

<template>
  <vxe-table
    :data="tableData"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
  >
    <vxe-column field="productName" title="产品名称" :edit-render="{}">
      <template #edit="{ row }">
        <el-input v-model="row.productName" />
      </template>
    </vxe-column>
    <vxe-column field="price" title="单价" :edit-render="{}">
      <template #edit="{ row }">
        <el-input-number v-model="row.price" :min="0" :precision="2" />
      </template>
    </vxe-column>
    <vxe-column title="操作" width="100">
      <template #default="{ row }">
        <el-button type="primary" link @click="saveRow(row)">保存</el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

---

树形表格

适用于组织架构、菜单管理等层级数据：

<template>
  <vxe-table
    :data="treeData"
    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', expandAll: false }"
    row-key
  >
    <vxe-column field="menuName" title="菜单名称" tree-node min-width="200" />
    <vxe-column field="menuType" title="类型" width="80" />
    <vxe-column field="sort" title="排序" width="80" />
  </vxe-table>
</template>

transform: true 模式下，传入平铺数组（有 id + parentId）即可，VxeTable 自动构建树形结构。

---

通过 ref 操作表格

const tableRef = ref<VxeTableInstance>()

// 获取所有选中行
const checkedRows = tableRef.value?.getCheckboxRecords()

// 清空选中状态
tableRef.value?.clearCheckboxRow()

// 获取表格数据（含编辑后的）
const allData = tableRef.value?.getTableData().fullData

// 刷新列宽
tableRef.value?.recalculate()

---

常见问题

问题	解决方案
表格高度撑不满父容器	父容器设置 height: 100%，表格设置 height="auto" 或具体像素值
虚拟滚动列宽错乱	为每列指定明确的 width 或 min-width
树形展开后复选框状态不对	checkStrictly: false 开启父子联动
可编辑模式保存后渲染不刷新	直接修改 row.field 即可，VxeTable 响应式会自动刷新