Table 表格

用于展示结构化数据的桌面级数据表格，支持排序、斑马纹、自定义列渲染。

基本用法

通过 columns 定义列，data 传入数据。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	24	广州
赵六	35	深圳

<script setup>
const columns = [
  { label: '姓名', key: 'name', sortable: true },
  { label: '年龄', key: 'age', align: 'right' },
  { label: '城市', key: 'city' }
]

const data = [
  { id: 1, name: '张三', age: 28, city: '北京' },
  { id: 2, name: '李四', age: 32, city: '上海' },
  { id: 3, name: '王五', age: 24, city: '广州' },
  { id: 4, name: '赵六', age: 35, city: '深圳' }
]
</script>

<ATable :columns="columns" :data="data" />

斑马纹

设置 stripe 启用交替行背景色。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	24	广州
赵六	35	深圳

<ATable :columns="columns" :data="data" stripe />

紧凑模式

设置 size="sm" 启用紧凑模式，行高更小，适合桌面端高密度展示。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	24	广州
赵六	35	深圳

<ATable :columns="columns" :data="data" size="sm" />

边框模式

设置 bordered 显示列边框。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	24	广州
赵六	35	深圳

<ATable :columns="columns" :data="data" bordered />

自定义单元格

使用具名插槽自定义列渲染。

姓名	年龄	城市
张三	28 岁	北京
李四	32 岁	上海
王五	24 岁	广州
赵六	35 岁	深圳

<ATable :columns="columns" :data="data">
  <template #name="{ row }">
    <strong>{{ row.name }}</strong>
  </template>
  <template #age="{ value }">
    <span style="color: var(--color-accent);">{{ value }} 岁</span>
  </template>
</ATable>

加载中

设置 loading 显示加载遮罩。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	24	广州
赵六	35	深圳

<ATable :columns="columns" :data="data" loading />

API

Props

名称	类型	默认值	说明
columns	TableColumn[]	—	列定义
data	Record<string, any>[]	—	数据源
stripe	boolean	false	斑马纹
bordered	boolean	false	显示边框
size	'sm' | 'md'	'md'	尺寸
loading	boolean	false	加载状态
rowKey	string	'id'	行唯一键字段

Column 定义

属性	类型	说明
label	string	列标题
key	string	字段名，也用于具名插槽
sortable	boolean	是否可排序
width	string	列宽
align	'left' | 'center' | 'right'	对齐方式

Slots

以 column.key 为名的具名插槽，接收 { row, value } 作用域。

Events

名称	参数	说明
sortChange	{ key, order }	排序变化时触发

交互特性

• 点击表头排序，三态循环（asc → desc → 无）
• 排序指示器图标随状态变色
• 行 hover 高亮
• 加载状态显示旋转遮罩
• 空数据友好提示
• 紧凑模式适合高密度桌面场景