表格

使用原生 table 結構，透過 UITable 統一處理框線、間距、色彩與橫向捲動。

UITable

完整框線表格

預設包含橫向與垂直欄位框線。包裝器內可直接使用 table、thead、tbody、tfoot 等原生標籤；窄螢幕會提供橫向捲動。

最近更新元件
元件編號	元件名稱	分類	更新時間	狀態	版本
CMP-001	輸入欄位	表單	2026/08/08 10:00	已發布	v1.2
CMP-002	彈出視窗	回饋	2026/08/08 14:00	審核中	v1.1
CMP-003	狀態標籤	內容	2026/08/09 11:30	已發布	v1.0
已發布					v1.x

查看使用方式

<UITable :hide-vertical-borders="false">
  <table>
    <thead>
      <tr>
        <th>元件名稱</th>
        <th>分類</th>
        <th>狀態</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>輸入欄位</td>
        <td>表單</td>
        <td>已發布</td>
      </tr>
    </tbody>
  </table>
</UITable>

UITable

隱藏垂直框線

設定 hide-vertical-borders 後，只保留橫向分隔線，適合內容較多、希望畫面更輕盈的表格。

元件名稱	分類	更新時間	狀態
輸入欄位	表單	2026/08/08 10:00	已發布
彈出視窗	回饋	2026/08/08 14:00	審核中
狀態標籤	內容	2026/08/09 11:30	已發布

查看使用方式

<UITable hide-vertical-borders><table>...</table></UITable>

UITablePaginationInfo + UITablePagination

表格換頁

使用 v-model 控制目前頁碼，可依需求選擇簡易或進階的換頁控制。

目前第 1 頁 / 共 12 頁 / 共 123 筆資料

簡易版

目前第 1 頁

進階版

目前第 1 頁

查看使用方式

<UITablePaginationInfo
  v-model="pageSize"
  :current-page="currentPage"
  :total-pages="12"
  :total-items="123"
  :page-size-options="[10, 20, 50, 100]"
/>

<UITablePagination v-model="simplePage" :total-pages="6" />
<UITablePagination v-model="currentPage" :total-pages="12" show-page-jump :page-jump-size="5" />