VirtualTable 虚拟表格

固定行高的大数据表格，仅渲染可见行。列配置见 TableColumn API。

基础用法

当前渲染 1–0 行已选 0 行

名称

状态

更新时间

1

Aurora 任务 1

林晨

已完成

2026-08-01 10:30

2

Aurora 任务 2

周言

进行中

2026-08-02 10:30

3

Aurora 任务 3

陈夏

进行中

2026-08-03 10:30

4

Aurora 任务 4

林晨

进行中

2026-08-04 10:30

5

Aurora 任务 5

周言

已完成

2026-08-05 10:30

6

Aurora 任务 6

陈夏

进行中

2026-08-06 10:30

7

Aurora 任务 7

林晨

进行中

2026-08-07 10:30

正在刷新任务

<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>
      <AuButton size="small" :type="showScroll ? 'primary' : 'default'" @click="showScroll = !showScroll">
        {{ showScroll ? '始终隐藏滚动条' : '悬浮显示滚动条' }}
      </AuButton>
      <span>当前渲染 {{ rendered.start + 1 }}–{{ rendered.end }} 行</span>
      <span>已选 {{ selectedRows.length }} 行</span>
    </div>
    <AuVirtualTable
      ref="tableRef"
      :data="rows"
      :height="360"
      :loading="loading"
      :show-scroll="showScroll"
      loading-text="正在刷新任务"
      stripe
      highlight-current-row
      @rows-rendered="rendered = $event"
      @selection-change="selectedRows = $event"
    >
      <AuTableColumn type="selection" :width="48" fixed />
      <AuTableColumn prop="id" label="编号" :width="90" fixed sortable />
      <AuTableColumn prop="name" label="名称" :width="180" :flex-grow="1" />
      <AuTableColumn prop="owner" label="负责人" :width="130" sortable />
      <AuTableColumn prop="status" label="状态" :width="110" align="center">
        <template #default="{ value }"><span class="virtual-table-demo__status" :class="{ 'is-active': value === '进行中' }">{{ value }}</span></template>
      </AuTableColumn>
      <AuTableColumn prop="updatedAt" label="更新时间" :width="160" />
    </AuVirtualTable>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuTableColumn, AuVirtualTable } from 'aurora-plus';
const tableRef = ref(null);
const loading = ref(true);
const showScroll = ref(false);
const rendered = ref({ start: 0, end: 0 });
const selectedRows = ref([]);
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>

自动高度

编号

名称

负责人

状态

进度

更新时间

备注

1

设计规范整理

林晨

已完成

100%

2026-09-10 09:30

已同步最新组件规范

2

数据接口联调

周言

进行中

72%

2026-09-11 14:20

等待服务端补充异常响应

3

桌面布局检查

陈夏

进行中

58%

2026-09-12 10:15

宽屏布局已完成

4

移动端布局检查

林晨

待处理

20%

2026-09-12 16:45

需要验证横向滚动体验

5

版本发布说明

周言

待处理

0%

2026-09-13 08:40

汇总本次组件属性变化

<template>
  <AuVirtualTable
    :data="rows"
    auto-height
    :row-height="48"
    :header-height="36"
    row-key="id"
  >
    <AuTableColumn prop="id" label="编号" :width="90" fixed />
    <AuTableColumn prop="name" label="名称" :width="220" />
    <AuTableColumn prop="owner" label="负责人" :width="160" />
    <AuTableColumn prop="status" label="状态" :width="150" />
    <AuTableColumn prop="progress" label="进度" :width="150" />
    <AuTableColumn prop="updatedAt" label="更新时间" :width="220" />
    <AuTableColumn prop="note" label="备注" :width="280" />
  </AuVirtualTable>
</template>
<script setup>
import { AuTableColumn, AuVirtualTable } from 'aurora-plus';
const rows = [
  { id: 1, name: '设计规范整理', owner: '林晨', status: '已完成', progress: '100%', updatedAt: '2026-09-10 09:30', note: '已同步最新组件规范' },
  { id: 2, name: '数据接口联调', owner: '周言', status: '进行中', progress: '72%', updatedAt: '2026-09-11 14:20', note: '等待服务端补充异常响应' },
  { id: 3, name: '桌面布局检查', owner: '陈夏', status: '进行中', progress: '58%', updatedAt: '2026-09-12 10:15', note: '宽屏布局已完成' },
  { id: 4, name: '移动端布局检查', owner: '林晨', status: '待处理', progress: '20%', updatedAt: '2026-09-12 16:45', note: '需要验证横向滚动体验' },
  { id: 5, name: '版本发布说明', owner: '周言', status: '待处理', progress: '0%', updatedAt: '2026-09-13 08:40', note: '汇总本次组件属性变化' },
];
</script>

VirtualTable API

属性

属性	说明	类型	默认值
data	行数据	array	[]
width	表格宽度	string / number	100%
height	表格高度，数字单位为 px	string / number	400
autoHeight	按全部行展开高度，忽略 height	boolean	false
rowHeight	固定行高，单位 px	number	40
headerHeight	表头高度，单位 px	number	36
overscan	视口上下额外渲染行数	number	6
rowKey	行标识字段路径或函数	string / Function	id
rowClass	行类名或 ({ row, rowIndex }) => string	string / Function	''
sortBy	受控排序 { key, order }，支持 v-model:sort-by	object	—
defaultSort	初始排序	object
remoteSort	只发出排序事件，由外部调整数据顺序	boolean	false
stripe	斑马纹	boolean	false
border	外框与竖向分隔线	boolean	false
showScroll	滚动条：桌面悬浮显示，触屏由系统显示	boolean	false
highlightCurrentRow	点击行时高亮当前行	boolean	false
loading	显示加载状态	boolean	false
loadingText	加载文字	string	加载中
emptyText	空数据文字	string	暂无数据

事件

事件	参数	说明
update:sortBy	(sort)	排序状态更新
sort-change	({ key, order, column })	点击排序列
scroll	({ scrollTop, scrollLeft, event })	表体滚动
rows-rendered	({ start, end })	可见行范围更新
row-click / row-dblclick	(row, sourceIndex, event)	点击 / 双击行
cell-click	(row, column, sourceIndex, event)	点击单元格
select	(selection, row)	单行选择变化
select-all	(selection)	表头全选变化
selection-change	(selection)	已选行变化
current-change	(currentRow, previousRow)	当前行变化

插槽

插槽	说明
default	声明 AuTableColumn 列
empty	空数据内容
loading	加载内容

实例方法与属性

名称	说明
scrollContainerRef	表体滚动容器
scrollTo(options)	滚动到 scrollTop / scrollLeft
scrollToTop(value?) / scrollToLeft(value?)	滚动到指定位置
scrollToRow(index, align?)	定位行；align 为 auto / start / center / end
selection / currentRow	已选行 / 当前行
toggleRowSelection(row, selected?)	切换指定行选择
toggleAllSelection() / clearSelection()	全选切换 / 清空选择
setCurrentRow(row)	设置当前行；传 null 清除