Table 表格

展示可排序、选择的数据；单元格内容可换行。大数据列表使用 VirtualTable。

基础用法

已选 0 行 · 当前行 无

#

状态

摘要

1

设计规范

已完成

整理组件尺寸与主题规则。

2

接口联调

进行中

核对表格选择与排序事件，并处理较长的说明文字在窄列中自然换行的情况。

3

视觉检查

进行中

确认默认无外框，横线与悬停状态保持轻量。

4

归档记录

已锁定

这一行不可勾选，仍可点击查看当前行高亮。

<template>
  <div class="table-demo">
    <div class="table-demo__toolbar">
      <AuButton size="small" :type="border ? 'primary' : 'default'" @click="border = !border">
        {{ border ? '关闭边框' : '显示边框' }}
      </AuButton>
      <AuButton size="small" :type="stripe ? 'primary' : 'default'" @click="stripe = !stripe">
        {{ stripe ? '关闭斑马纹' : '显示斑马纹' }}
      </AuButton>
      <AuButton size="small" @click="tableRef?.clearSelection()">清空选择</AuButton>
      <span class="table-demo__summary">已选 {{ selectedRows.length }} 行 · 当前行 {{ currentRow?.name || '无' }}</span>
    </div>
    <AuTable
      ref="tableRef"
      :data="rows"
      row-key="id"
      auto-height
      :border="border"
      :stripe="stripe"
      highlight-current-row
      @selection-change="selectedRows = $event"
      @current-change="currentRow = $event"
    >
      <AuTableColumn type="selection" :selectable="canSelectRow" />
      <AuTableColumn type="index" label="#" />
      <AuTableColumn prop="name" label="名称" :width="140" sortable />
      <AuTableColumn prop="status" label="状态" :width="100">
        <template #default="{ value }">
          <span :class="{ 'table-demo__status--active': value === '进行中' }">{{ value }}</span>
        </template>
      </AuTableColumn>
      <AuTableColumn prop="summary" label="摘要" :width="250" :flex-grow="1" />
    </AuTable>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuTable, AuTableColumn } from 'aurora-plus';
const tableRef = ref(null);
const border = ref(false);
const stripe = ref(false);
const selectedRows = ref([]);
const currentRow = ref(null);
const rows = [
  { id: 1, name: '设计规范', status: '已完成', summary: '整理组件尺寸与主题规则。' },
  { id: 2, name: '接口联调', status: '进行中', summary: '核对表格选择与排序事件，并处理较长的说明文字在窄列中自然换行的情况。' },
  { id: 3, name: '视觉检查', status: '进行中', summary: '确认默认无外框，横线与悬停状态保持轻量。' },
  { id: 4, name: '归档记录', status: '已锁定', summary: '这一行不可勾选，仍可点击查看当前行高亮。', locked: true },
];
function canSelectRow(row) {
  return !row.locked;
}
</script>
<style scoped>
.table-demo {
  min-width: 0;
}
.table-demo__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.table-demo__summary {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.table-demo__status--active {
  color: var(--au-color-primary);
}
</style>

滚动条

编号

任务

负责人

说明

更新时间

1

任务 1

林晨

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-10 10:30

2

任务 2

周言

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-11 10:30

3

任务 3

陈夏

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-12 10:30

4

任务 4

林晨

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-13 10:30

5

任务 5

周言

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-14 10:30

6

任务 6

陈夏

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-15 10:30

7

任务 7

林晨

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-16 10:30

8

任务 8

周言

滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。

2026-09-17 10:30

<template>
  <div class="table-scroll-demo">
    <div class="table-scroll-demo__actions">
      <AuButton size="small" :type="showScroll ? 'primary' : 'default'" @click="showScroll = !showScroll">
        {{ showScroll ? '始终隐藏滚动条' : '悬浮显示滚动条' }}
      </AuButton>
      <AuButton size="small" @click="tableRef?.scrollToLeft(520)">查看右侧列</AuButton>
      <AuButton size="small" @click="tableRef?.scrollToLeft(0)">回到左侧</AuButton>
    </div>
    <AuTable ref="tableRef" :data="rows" :height="210" :show-scroll="showScroll" row-key="id">
      <AuTableColumn prop="id" label="编号" :width="90" fixed />
      <AuTableColumn prop="name" label="任务" :width="220" />
      <AuTableColumn prop="owner" label="负责人" :width="160" />
      <AuTableColumn prop="summary" label="说明" :width="500" />
      <AuTableColumn prop="updatedAt" label="更新时间" :width="220" />
    </AuTable>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuTable, AuTableColumn } from 'aurora-plus';
const tableRef = ref(null);
const showScroll = ref(false);
const rows = Array.from({ length: 8 }, (_, index) => ({
  id: index + 1,
  name: `任务 ${index + 1}`,
  owner: ['林晨', '周言', '陈夏'][index % 3],
  summary: '滚动条隐藏时仍可滚动表格，列宽超过容器时也可以查看右侧内容。',
  updatedAt: `2026-09-${String(index + 10).padStart(2, '0')} 10:30`,
}));
</script>
<style scoped>
.table-scroll-demo {
  min-width: 0;
}
.table-scroll-demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
</style>

Table API

属性

属性	说明	类型	默认值
data	行数据	array	[]
width	表格宽度	string / number	100%
height	表格高度，数字单位为 px	string / number	400
autoHeight	按内容展开高度，忽略 height	boolean	false
headerHeight	表头高度，单位 px	number	36
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
getRowFromEvent(event)	获取事件所在行；未命中返回 null
selection / currentRow	已选行 / 当前行
toggleRowSelection(row, selected?)	切换指定行选择
toggleAllSelection() / clearSelection()	全选切换 / 清空选择
setCurrentRow(row)	设置当前行；传 null 清除

TableColumn API

属性

属性	说明	类型	默认值
type	default / selection / index	string	default
prop	行对象字段路径，支持 profile.name	string	''
label	表头文字	string	''
width	列宽，单位 px	number / string	普通列 120，选择 / 索引列 48
minWidth	最小列宽，单位 px	number / string	普通列 60，选择 / 索引列 44
maxWidth	最大列宽，单位 px	number / string	无上限
flexGrow	剩余宽度的扩展比例	number	0
align	left / center / right	string	left；选择 / 索引列居中
fixed	固定位置：true / left / right	boolean / string	false
sortable	开启列排序	boolean	false
sortMethod	自定义比较 (leftRow, rightRow, column)	Function	—
formatter	文本格式化 (row, column, value, index)	Function	—
selectable	选择列禁选条件 (row, index) => boolean	Function	—
columnClass	列单元格类名	string	''

插槽

插槽	参数	说明
default		单元格内容
header		表头内容