Components · Table
下载

组件

Table 表格

数据表格：斑马纹、无边框、紧凑；--sortable / --selectable 为 DataTable 纯样式层（排序/选中 JS 由 CMS 负责）。

默认

名称角色状态
Alice编辑启用
Bob访客停用
<div class="pvs-table-wrap">
  <table class="pvs-table">
    <thead>
      <tr>
        <th>名称</th>
        <th>角色</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>编辑</td>
        <td>启用</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>访客</td>
        <td>停用</td>
      </tr>
    </tbody>
  </table>
</div>

条纹 / 无边框 / 紧凑

SKU库存
A-01120
B-028
C-0345
列1列2
无竖线表格
<div class="pvs-table-wrap">
  <table class="pvs-table pvs-table--striped pvs-table--compact">
    <thead>
      <tr>
        <th>SKU</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A-01</td>
        <td>120</td>
      </tr>
      <tr>
        <td>B-02</td>
        <td>8</td>
      </tr>
      <tr>
        <td>C-03</td>
        <td>45</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="pvs-table-wrap pvs-mt-4">
  <table class="pvs-table pvs-table--borderless">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>无竖线</td>
        <td>表格</td>
      </tr>
    </tbody>
  </table>
</div>

悬停行

默认表格行悬停有浅蓝底（无需额外类）。

用户邮箱
Alicealice@ex.com
Bobbob@ex.com
Carolcarol@ex.com

鼠标悬停行查看高亮

<div class="pvs-table-wrap">
  <table class="pvs-table">
    <thead>
      <tr>
        <th>用户</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>alice@ex.com</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@ex.com</td>
      </tr>
      <tr>
        <td>Carol</td>
        <td>carol@ex.com</td>
      </tr>
    </tbody>
  </table>
</div>
<p class="pvs-text-sm pvs-text-muted pvs-mt-2 pvs-m-0">鼠标悬停行查看高亮</p>

DataTable shell

工具条 + 可排序表头 + 可选中行；is-sorted-asc / is-selected 由业务 JS 切换。

用户列表
名称角色更新时间
Alice编辑06-15
Bob访客06-14
<div class="pvs-table__toolbar">
  <span class="pvs-text-sm pvs-font-semibold">用户列表</span>
  <div class="pvs-table__toolbar-actions">
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">导出</button>
    <button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm">新建</button>
  </div>
</div>
<div class="pvs-table-wrap">
  <table class="pvs-table pvs-table--striped pvs-table--sortable pvs-table--selectable">
    <thead>
      <tr>
        <th class="pvs-table__check">
          <input type="checkbox" aria-label="全选" />
        </th>
        <th class="is-sorted-asc">名称</th>
        <th>角色</th>
        <th class="is-sorted-desc">更新时间</th>
      </tr>
      <tr class="pvs-table__filter-row">
        <th>
        </th>
        <th>
          <input class="pvs-input pvs-input--sm" type="search" placeholder="筛选…" />
        </th>
        <th>
          <select class="pvs-select pvs-input--sm">
            <option>全部</option>
          </select>
        </th>
        <th>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="is-selected">
        <td class="pvs-table__check">
          <input type="checkbox" checked />
        </td>
        <td>Alice</td>
        <td>编辑</td>
        <td>06-15</td>
      </tr>
      <tr>
        <td class="pvs-table__check">
          <input type="checkbox" />
        </td>
        <td>Bob</td>
        <td>访客</td>
        <td>06-14</td>
      </tr>
    </tbody>
  </table>
</div>

类名速查

类名说明
pvs-table-wrap横向滚动外壳
pvs-table表格根
pvs-table--striped斑马纹
pvs-table--borderless无竖线
pvs-table--compact紧凑行高
pvs-table--sortable可排序表头箭头
pvs-table--selectable可选中行高亮
pvs-table__toolbar表格上方工具条
pvs-table__filter-row表头下筛选行
is-sorted-asc / is-sorted-desc排序方向（JS 切换）
is-selected选中行（JS 切换）