外观
VxeTable 高性能表格
2026-04-01
版本: 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 响应式会自动刷新 |
