STableRow <s-table-row>

表格中的一行数据。 STableRow 是 Shopify Polaris <s-table-row> web component 的带类型 Vue 3 wrapper。

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

示例

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 variant="auto">
    <STableHeaderRow>
      <STableHeader listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <!-- Each STableRow is one record; its children should be STableCell. -->
      <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	类型	说明
children	any	此表格行中显示的数据单元格，每个单元格包含其对应列的内容。只接受表格单元格组件作为子元素。
clickDelegate	string | undefined	行中某个交互元素（例如 s-link）的 ID，点击该行时该元素将成为点击目标。这是该行的主要操作，不应用于次要操作。这只是一种仅限点击的交互方式，不会引入任何键盘或屏幕阅读器交互。因此目标元素必须位于表格中，以便键盘和屏幕阅读器用户可以正常与其交互。

Slots

Slot	说明
default	此表格行中显示的数据单元格，每个单元格包含其对应列的内容。只接受表格单元格组件作为子元素。