STable <s-table>

用于展示结构化数据的表格，可选支持分页、加载状态以及在小屏幕上的列表布局。 STable 是 Shopify Polaris <s-table> web component 的带类型 Vue 3 wrapper。

import { STable } from 'polaris-vue-elements'

最佳实践

• 将表格用于商家需要比较的数据。 表格适合大量具有相同属性、需要并排浏览的记录。对于没有比较需求的简单列表，请选择更简单的组件。
• 为移动端的列表布局做好规划。 在移动端，表格会变成列表，因此请检查表头和值在以“标签-值”对堆叠显示（而不是网格）时是否依然易读。
• 控制列数。 列数过多会使表格难以浏览，并迫使用户水平滚动。只显示商家完成任务所需的列，并考虑按需显示其余列。
• 编写清晰的列标题。 让每个 STableHeader 简短且具有描述性，让商家确切知道该列包含什么数据。
• 为大型数据集做好规划。 大型表格会影响性能和易用性。当行数超过大约 50 到 100 行时，开启 paginate，或者考虑添加筛选或搜索，让商家更快找到所需记录。

<STable paginate hasNextPage>
  <STableHeaderRow>
    <STableHeader>Product</STableHeader>
    <STableHeader format="numeric">Inventory</STableHeader>
  </STableHeaderRow>
  <STableBody>
    <STableRow>
      <STableCell>Snowboard</STableCell>
      <STableCell>24</STableCell>
    </STableRow>
  </STableBody>
</STable>

参阅 Shopify 关于 <s-table> 的最佳实践（英文）以获取完整指南。

示例

OrderCustomerTotalStatus#1001Alex Morgan$120.00Fulfilled#1002Sam Rivera$45.50Pending#1003Jamie Lee$310.25Cancelled

<script setup>
import {
  STable,
  STableHeaderRow,
  STableHeader,
  STableBody,
  STableRow,
  STableCell,
  SBadge,
} from 'polaris-vue-elements'
</script>

<template>
  <!-- STable is the root: it lays out the header row + body and can switch to a
       "list" layout on narrow devices when variant="auto". -->
  <STable variant="auto">
    <STableHeaderRow>
      <STableHeader listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <STableRow>
        <STableCell>#1001</STableCell>
        <STableCell>Alex Morgan</STableCell>
        <STableCell>$120.00</STableCell>
        <STableCell><SBadge tone="success">Fulfilled</SBadge></STableCell>
      </STableRow>
      <STableRow>
        <STableCell>#1002</STableCell>
        <STableCell>Sam Rivera</STableCell>
        <STableCell>$45.50</STableCell>
        <STableCell><SBadge tone="warning">Pending</SBadge></STableCell>
      </STableRow>
      <STableRow>
        <STableCell>#1003</STableCell>
        <STableCell>Jamie Lee</STableCell>
        <STableCell>$310.25</STableCell>
        <STableCell><SBadge tone="critical">Cancelled</SBadge></STableCell>
      </STableRow>
    </STableBody>
  </STable>
</template>

Props

Prop	类型	说明
hasNextPage	boolean	是否存在下一页数据。
hasPreviousPage	boolean	是否存在上一页数据。
loading	boolean	表格是否处于加载状态，例如页面初次加载或在分页表格中加载下一页时。为 true 时，表格可能处于 inert 状态，从而阻止用户交互。
paginate	boolean	是否使用分页控件。
variant	"auto" | "list"	表格组件的布局变体。 - list：始终以列表布局显示。 - auto：在宽屏上自动显示为表格，在窄屏上显示为列表。

Events

Event	类型
nextpage	Event
previouspage	Event

在 <STable> 上使用 @nextpage 形式的监听器来监听这些事件。

Slots

Slot	说明
default	表格组件中显示的表格结构，包括以网格形式组织数据的表头、行和单元格。
filters	在表格中显示的附加筛选器，例如搜索字段或其他可让用户缩小所显示数据范围的输入组件。