Sakana Element

简体中文

English

简体中文

English

主题

Table 表格 ​

包裹原生 <table> 元素并应用像素风格的 CSS 容器组件。在 <px-table> 内编写标准 HTML 表格即可。

?
名称分类说明类型默认值
type? 风格颜色类型'primary' | 'success' | 'info' | 'warning' | 'danger'—
zebra? 风格斑马纹（交替行高亮）booleanfalse
stripe? 风格zebra 的别名booleanfalse
hover? 风格行悬停高亮booleanfalse
border? 风格全边框booleanfalse
outline? 风格线框边框（无填充）booleanfalse
ghost? 风格无边框无阴影booleanfalse
size? 尺寸表格尺寸'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
pinRows? 行为固定表头/表尾（sticky）booleanfalse
pinCols? 行为固定首列（sticky）booleanfalse
showHeader? 行为是否显示表头booleantrue
hoverable? 行为悬停时抬起效果booleanfalse
default? 插槽表格内容（原生 <table> 元素）—

基础用法 ​

<template>
  <px-table>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Class</th>
          <th>Level</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sakana</td>
          <td>Warrior</td>
          <td>12</td>
        </tr>
        <tr>
          <td>Pixel</td>
          <td>Mage</td>
          <td>8</td>
        </tr>
        <tr>
          <td>Retro</td>
          <td>Archer</td>
          <td>15</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

斑马纹 ​

使用 zebra（或 stripe）让行背景交替显示。

<template>
  <px-table zebra>
    <table>
      <thead>
        <tr>
          <th>Item</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Potion</td>
          <td>5</td>
          <td>50g</td>
        </tr>
        <tr>
          <td>Ether</td>
          <td>3</td>
          <td>100g</td>
        </tr>
        <tr>
          <td>Phoenix Down</td>
          <td>1</td>
          <td>300g</td>
        </tr>
        <tr>
          <td>Elixir</td>
          <td>2</td>
          <td>500g</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

悬停高亮 ​

使用 hover 在鼠标悬停时高亮行。

<template>
  <px-table hover>
    <table>
      <thead>
        <tr>
          <th>Player</th>
          <th>Score</th>
          <th>Rank</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>9800</td>
          <td>#1</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>8500</td>
          <td>#2</td>
        </tr>
        <tr>
          <td>Carol</td>
          <td>7200</td>
          <td>#3</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

全边框 ​

使用 border 为所有单元格添加边框。

<template>
  <px-table border>
    <table>
      <thead>
        <tr>
          <th>Stat</th>
          <th>Base</th>
          <th>Bonus</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>STR</td>
          <td>10</td>
          <td>+3</td>
          <td>13</td>
        </tr>
        <tr>
          <td>DEX</td>
          <td>14</td>
          <td>+2</td>
          <td>16</td>
        </tr>
        <tr>
          <td>INT</td>
          <td>8</td>
          <td>+5</td>
          <td>13</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

颜色类型 ​

使用 type 应用颜色变体：primary、success、warning、danger、info。

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <px-table type="primary">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table type="success">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table type="warning">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table type="danger">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table type="info">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
        </tbody>
      </table>
    </px-table>
  </div>
</template>

尺寸变体 ​

五种尺寸：xs、sm、md（默认）、lg、xl。

<template>
  <div class="demo-table-size">
    <div v-for="s in sizes" :key="s">
      <p>size: {{ s }}</p>
      <px-table :size="s">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>HP</td>
              <td>120</td>
            </tr>
            <tr>
              <td>MP</td>
              <td>45</td>
            </tr>
          </tbody>
        </table>
      </px-table>
    </div>
  </div>
</template>

<script setup lang="ts">
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
</script>

<style scoped>
.demo-table-size {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.demo-table-size p {
  margin: 0 0 8px;
  font-weight: 600;
}
</style>

固定表头（Pin Rows） ​

配合固定的 max-height，使用 pin-rows 让表头在滚动时保持固定。

<template>
  <px-table pin-rows style="max-height: 200px">
    <table>
      <thead>
        <tr>
          <th>Quest</th>
          <th>Reward</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in 10" :key="i">
          <td>Quest #{{ i }}</td>
          <td>{{ i * 100 }}g</td>
          <td>{{ i % 3 === 0 ? 'Complete' : 'Active' }}</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

固定首列（Pin Cols） ​

配合固定的 max-width，使用 pin-cols 让首列在水平滚动时保持固定。

<template>
  <px-table pin-cols style="max-width: 400px">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>HP</th>
          <th>MP</th>
          <th>STR</th>
          <th>DEX</th>
          <th>INT</th>
          <th>LUK</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sakana</td>
          <td>120</td>
          <td>40</td>
          <td>15</td>
          <td>10</td>
          <td>8</td>
          <td>12</td>
        </tr>
        <tr>
          <td>Pixel</td>
          <td>80</td>
          <td>100</td>
          <td>6</td>
          <td>12</td>
          <td>18</td>
          <td>9</td>
        </tr>
        <tr>
          <td>Retro</td>
          <td>100</td>
          <td>60</td>
          <td>12</td>
          <td>16</td>
          <td>10</td>
          <td>14</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

线框 ​

使用 outline 渲染无填充的线框边框。可与 type 组合使用彩色线框。

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <px-table outline>
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
          <tr><td>Retro</td><td>Archer</td><td>15</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table outline type="primary">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
          <tr><td>Retro</td><td>Archer</td><td>15</td></tr>
        </tbody>
      </table>
    </px-table>
  </div>
</template>

幽灵模式 ​

使用 ghost 移除边框和阴影，仅保留表格内部样式。

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <px-table ghost>
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
          <tr><td>Retro</td><td>Archer</td><td>15</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table ghost type="danger" hover>
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
          <tr><td>Retro</td><td>Archer</td><td>15</td></tr>
        </tbody>
      </table>
    </px-table>
  </div>
</template>

悬停抬起 ​

使用 hoverable 添加像素风格的悬停抬起和点击下压效果。

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <px-table hoverable type="primary">
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
          <tr><td>Retro</td><td>Archer</td><td>15</td></tr>
        </tbody>
      </table>
    </px-table>
    <px-table hoverable type="success" outline>
      <table>
        <thead>
          <tr><th>Name</th><th>Class</th><th>Level</th></tr>
        </thead>
        <tbody>
          <tr><td>Sakana</td><td>Warrior</td><td>12</td></tr>
          <tr><td>Pixel</td><td>Mage</td><td>8</td></tr>
          <tr><td>Retro</td><td>Archer</td><td>15</td></tr>
        </tbody>
      </table>
    </px-table>
  </div>
</template>

组合使用 ​

所有功能可以组合使用。

<template>
  <px-table zebra hover border pin-rows size="sm" style="max-height: 240px">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Monster</th>
          <th>HP</th>
          <th>EXP</th>
          <th>Drop</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="m in monsters" :key="m.id">
          <td>{{ m.id }}</td>
          <td>{{ m.name }}</td>
          <td>{{ m.hp }}</td>
          <td>{{ m.exp }}</td>
          <td>{{ m.drop }}</td>
        </tr>
      </tbody>
    </table>
  </px-table>
</template>

<script setup lang="ts">
const monsters = [
  { id: 1, name: 'Slime', hp: 10, exp: 5, drop: 'Gel' },
  { id: 2, name: 'Bat', hp: 15, exp: 8, drop: 'Wing' },
  { id: 3, name: 'Goblin', hp: 30, exp: 15, drop: 'Dagger' },
  { id: 4, name: 'Skeleton', hp: 45, exp: 25, drop: 'Bone' },
  { id: 5, name: 'Orc', hp: 80, exp: 40, drop: 'Axe' },
  { id: 6, name: 'Dragon', hp: 200, exp: 100, drop: 'Scale' },
  { id: 7, name: 'Demon', hp: 150, exp: 80, drop: 'Horn' },
  { id: 8, name: 'Ghost', hp: 60, exp: 30, drop: 'Ectoplasm' },
];
</script>