Table

语义化表格组件集,输出原生 <table> 结构,搭配 UnoCSS 即可自由定制视觉。

Anatomy

• Table原生 <table>,带默认 text-sm + caption-bottom 样式
  • TableCaption表格标题 <caption>
  • TableHeader表头 <thead>
  • TableBody正文 <tbody>
  • TableFooter表尾 <tfoot>
  • TableRow行 <tr>
  • TableHead表头单元格 <th>
  • TableCell单元格 <td>
  • TableEmpty空状态行 (自带 TableRow + TableCell 包裹)

基本用法

标准表格

Header / Body / Footer / Caption 齐全。

最近的发票。

发票号	状态	方式	金额
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
合计			$750.00

<script setup lang="ts">
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@tripo3d/design';

const invoices = [
  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
];
</script>

<template>
  <Table>
    <TableCaption>最近的发票。</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead>发票号</TableHead>
        <TableHead>状态</TableHead>
        <TableHead>方式</TableHead>
        <TableHead class="text-right">金额</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow v-for="row in invoices" :key="row.invoice">
        <TableCell class="font-medium">{{ row.invoice }}</TableCell>
        <TableCell>{{ row.status }}</TableCell>
        <TableCell>{{ row.method }}</TableCell>
        <TableCell class="text-right">{{ row.amount }}</TableCell>
      </TableRow>
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colspan="3">合计</TableCell>
        <TableCell class="text-right">$750.00</TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</template>

空状态

使用 TableEmpty 直接渲染一整行占位提示,无需再手动包 TableRow。

TableEmpty

当数据为空时渲染居中的空状态行。

名称	状态
暂无数据

<script setup lang="ts">
import { TableBody, TableEmpty, /* ... */ } from '@tripo3d/design';
</script>

<template>
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>名称</TableHead>
        <TableHead>状态</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableEmpty v-if="!data.length" :colspan="2">
        暂无数据
      </TableEmpty>
      <TableRow v-for="row in data" v-else :key="row.id">
        <TableCell>{{ row.name }}</TableCell>
        <TableCell>{{ row.status }}</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>

API

Table / TableHeader / TableBody / TableFooter / TableRow / TableHead / TableCell / TableCaption Props

名称	类型	默认值	说明
class	string	—	对应原生元素的 class;组件不提供额外 props,仅做语义封装

TableEmpty Props

名称	类型	默认值	说明
colspan	number	1	合并列数,应与表格列数一致
class	string	—	容器 class

Slots

插槽	作用域	说明
default (Table 等)	—	对应子元素;完全按照原生 结构组合 default (TableEmpty) — 空状态提示内容(文字 / 图标) 可访问性 输出标准 <table> / <thead> / <tbody> / <tfoot> / <tr> / <th> / <td> / <caption>,屏幕阅读器天然理解表格语义 请保留 TableCaption 或使用 aria-label 为表格提供概要描述 TableHead 渲染为 <th>,自动被辅助技术识别为列/行标题 最后更新: Pager 上一页Switch 下一页Tabs 基于 MIT 协议发布(内部使用) Copyright © Tripo3D