Appearance
VirtualTable 虚拟表格
AuVirtualTable 面向固定行高的大数据表格，只渲染视口和缓冲区中的行。列通过 JavaScript 对象配置，支持弹性宽度、左右固定、排序、格式化与具名插槽。
基础用法
10,000 行数据
支持切换刷新加载态；滚动时 DOM 中只保留当前可见行和 overscan 缓冲行。
当前渲染 1–0 行
vue
<template>
<div class="virtual-table-demo">
<div class="virtual-table-demo__actions">
<AuButton size="small" @click="tableRef?.scrollToRow(5000, 'center')">定位第 5,001 行</AuButton>
<AuButton size="small" :type="loading ? 'primary' : 'default'" @click="loading = !loading">
{{ loading ? '结束刷新' : '模拟刷新' }}
</AuButton>
<span>当前渲染 {{ rendered.start + 1 }}–{{ rendered.end }} 行</span>
</div>
<AuVirtualTable
ref="tableRef"
:columns="columns"
:data="rows"
:height="360"
:loading="loading"
loading-text="正在刷新任务"
stripe
border
@rows-rendered="rendered = $event"
>
<template #cell-status="{ value }">
<span class="virtual-table-demo__status" :class="{ 'is-active': value === '进行中' }">
{{ value }}
</span>
</template>
</AuVirtualTable>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuVirtualTable } from 'aurora-plus';
const tableRef = ref(null);
const loading = ref(true);
const rendered = ref({ start: 0, end: 0 });
const columns = [
{ key: 'id', title: '编号', dataKey: 'id', width: 90, fixed: 'left', sortable: true },
{ key: 'name', title: '名称', dataKey: 'name', width: 180, flexGrow: 1 },
{ key: 'owner', title: '负责人', dataKey: 'owner', width: 130, sortable: true },
{ key: 'status', title: '状态', dataKey: 'status', width: 110, align: 'center' },
{ key: 'updatedAt', title: '更新时间', dataKey: 'updatedAt', width: 160 },
];
const rows = Array.from({ length: 10000 }, (_, index) => ({
id: index + 1,
name: `Aurora 任务 ${index + 1}`,
owner: ['林晨', '周言', '陈夏'][index % 3],
status: index % 4 === 0 ? '已完成' : '进行中',
updatedAt: `2026-08-${String(index % 28 + 1).padStart(2, '0')} 10:30`,
}));
</script>
<style scoped>
.virtual-table-demo {
display: grid;
gap: 10px;
}
.virtual-table-demo__actions {
display: flex;
align-items: center;
gap: 10px;
color: var(--au-color-text-secondary);
font-size: var(--au-font-size-small);
}
.virtual-table-demo__status {
color: var(--au-color-success);
}
.virtual-table-demo__status.is-active {
color: var(--au-color-primary);
}
</style>Column 配置
| 字段 | 说明 |
|---|---|
key | 列唯一标识，也是具名插槽后缀 |
dataKey | 行对象字段路径，支持 profile.name |
title / label | 表头文字 |
width / minWidth / maxWidth | 列宽边界，单位 px |
flexGrow | 容器有剩余空间时的扩展比例 |
align | left / center / right |
fixed | left / right / true，true 等同左固定 |
sortable | 开启列排序 |
sortMethod(leftRow, rightRow, column) | 自定义本地比较函数 |
formatter(row, column, value, index) | 文本格式化函数 |
class | 列单元格类名 |
Attributes
| 属性 | 说明 | 默认值 |
|---|---|---|
columns / data | 列配置 / 完整行数据 | [] / [] |
width / height | 表格外部尺寸 | 100% / 400 |
rowHeight / headerHeight | 固定行高 / 表头高度 | 40 / 36 |
overscan | 视口上下额外渲染行数 | 6 |
rowKey | key 字段路径或函数 | id |
rowClass | 行类名或 ({ row, rowIndex }) => string | '' |
sortBy / v-model:sort-by | { key, order }，order 为 ascending / descending / '' | — |
defaultSort | 初始排序 | { key: '', order: '' } |
remoteSort | 只发出排序事件，不在组件内重排数据 | false |
stripe / border | 斑马纹 / 单元格分隔线 | false |
loading / loadingText | 加载状态与文字 | false / 加载中 |
emptyText / ariaLabel | 空数据文字 / 表格名称 | 暂无数据 / 虚拟表格 |
Slots、Events 与 Exposes
列 key 为 name 时，可使用 #header-name="{ column }" 和 #cell-name="{ row, column, value, index }"。另有 empty 与 loading 插槽。
事件包括 sort-change、scroll、rows-rendered({ start, end })、row-click、row-dblclick 和 cell-click。组件暴露 scrollTo(options)、scrollToTop(value?)、scrollToLeft(value?)、scrollToRow(index, align?) 与 scrollContainerRef。
行高必须与 rowHeight 一致；需要动态行高或合并单元格时应使用普通表格组件。