🔥 遇见我们的新项目 t0ggles - 你终极的项目管理工具! 🔥

数据表格 Vue 组件

数据表显示一组原始数据。它们通常出现在桌面企业产品中。

数据表格组件

以下组件包含在内

  • 表格
  • 表头
  • 表体
  • 表格行
  • 表格单元格

TableRow 属性

名称类型默认值描述
colors对象

带有 Tailwind CSS 颜色类别的对象

colors.bgIos字符串'hover:bg-black/5 dark:hover:bg-white/10'

表格行悬停背景颜色

colors.bgMaterial字符串'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container'

表格行悬停背景颜色

colors.dividerMaterial字符串'border-md-light-outline dark:border-md-dark-outline'

表格行分隔线颜色

header布尔值

位于 TableHead 内部

TableCell 属性

名称类型默认值描述
colors对象

带有 Tailwind CSS 颜色类别的对象

colors.textHeaderIos字符串'text-black/45 dark:text-white/55'

表格单元格标题文本颜色

colors.textHeaderMaterial字符串'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

表格单元格标题文本颜色

header布尔值

位于 TableHead 内部

示例

DataTable.vue
<template>
<k-page>
<k-navbar title="Data Table" />
<k-block-title>Plain table</k-block-title>
<div class="block overflow-x-auto mt-8">
<k-table>
<k-table-head>
<k-table-row header>
<k-table-cell header>Dessert (100g serving)</k-table-cell>
<k-table-cell header class="text-right">Calories</k-table-cell>
<k-table-cell header class="text-right">Fat (g)</k-table-cell>
<k-table-cell header class="text-right">Carbs</k-table-cell>
<k-table-cell header class="text-right">Protein (g)</k-table-cell>
</k-table-row>
</k-table-head>
<k-table-body>
<k-table-row>
<k-table-cell>Frozen yogurt</k-table-cell>
<k-table-cell class="text-right">159</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">4.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Ice cream sandwich</k-table-cell>
<k-table-cell class="text-right">237</k-table-cell>
<k-table-cell class="text-right">9.0</k-table-cell>
<k-table-cell class="text-right">37</k-table-cell>
<k-table-cell class="text-right">4.4</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Eclair</k-table-cell>
<k-table-cell class="text-right">262</k-table-cell>
<k-table-cell class="text-right">16.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Cupcake</k-table-cell>
<k-table-cell class="text-right">305</k-table-cell>
<k-table-cell class="text-right">3.7</k-table-cell>
<k-table-cell class="text-right">67</k-table-cell>
<k-table-cell class="text-right">4.3</k-table-cell>
</k-table-row>
</k-table-body>
</k-table>
</div>
<k-block-title>Within card</k-block-title>
<k-card class="block overflow-x-auto mt-8" :content-wrap="false">
<k-table>
<k-table-head>
<k-table-row header>
<k-table-cell header>Dessert (100g serving)</k-table-cell>
<k-table-cell header class="text-right">Calories</k-table-cell>
<k-table-cell header class="text-right">Fat (g)</k-table-cell>
<k-table-cell header class="text-right">Carbs</k-table-cell>
<k-table-cell header class="text-right">Protein (g)</k-table-cell>
</k-table-row>
</k-table-head>
<k-table-body>
<k-table-row>
<k-table-cell>Frozen yogurt</k-table-cell>
<k-table-cell class="text-right">159</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">4.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Ice cream sandwich</k-table-cell>
<k-table-cell class="text-right">237</k-table-cell>
<k-table-cell class="text-right">9.0</k-table-cell>
<k-table-cell class="text-right">37</k-table-cell>
<k-table-cell class="text-right">4.4</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Eclair</k-table-cell>
<k-table-cell class="text-right">262</k-table-cell>
<k-table-cell class="text-right">16.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Cupcake</k-table-cell>
<k-table-cell class="text-right">305</k-table-cell>
<k-table-cell class="text-right">3.7</k-table-cell>
<k-table-cell class="text-right">67</k-table-cell>
<k-table-cell class="text-right">4.3</k-table-cell>
</k-table-row>
</k-table-body>
</k-table>
</k-card>
</k-page>
</template>
<script>
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kCard,
kTable,
kTableHead,
kTableBody,
kTableCell,
kTableRow,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kCard,
kTable,
kTableHead,
kTableBody,
kTableCell,
kTableRow,
},
};
</script>
代码许可证 MIT.
2022 © Konsta UI 由 nolimits4web.