QMarkupTable 允许您简单地将原生 <table>
标记包装起来,使其看起来像一个 Material Design 表格。
提示
对于分页、排序、过滤等更高级的功能,您可能需要查看 QTable 组件。
用法
警告
请注意,QMarkupTable
的内容反映了原生 HTML <table>
的准确标记表示,具有 <thead>
和 <tbody>
来包装表头和表格主体。这是必需的。
UMD 开发者
此组件在 Quasar 的 UMD 版本中不会按原样工作。浏览器在 Vue 启动并渲染它之前解析模板 HTML,因此标记需要正确。<q-markup-table> <thead>
或 <q-markup-table> <tbody>
不是。解决方法是将内容包装在 <template>
中,如下所示
<q-markup-table>
<template>
<!-- your content -->
</template>
</q-markup-table>
content_paste
提示
如果您想删除某些行或某些单元格的悬停效果,请向其添加 q-tr--no-hover
或 q-td--no-hover
类。