QMarkupTable 是一个用于简单包装原生 <table> 的方式,使其看起来像 Material Design 表格。
TIP
对于分页、排序、过滤等高级功能,您可能需要查阅 QTable 组件。
用法
WARNING
请注意,QMarkupTable 的内容需要准确反映原生 HTML <table> 的标记结构,必须包含 <thead> 和 <tbody> 来包装表头和表格主体。这是必需的。
UMD 开发者
此组件在 Quasar 的 UMD 版本中不能直接使用。浏览器会在 Vue 渲染之前解析模板 HTML,因此标记必须是正确的。<q-markup-table> <thead> 或 <q-markup-table> <tbody> 是不正确的。解决方案是将内容包装在 <template> 中,如下所示:
<q-markup-table>
<template>
<!-- 你的内容 -->
</template>
</q-markup-table>content_paste
TIP
不要忘记使用 dense 属性来使表格更紧凑。
TIP
您可以使用 QTable 组件的 flat 和 bordered 属性来获得与 QMarkupTable 相同的设计。
TIP
如果要删除某些行或单元格上的悬停效果,请向其添加 q-tr--no-hover 或 q-td--no-hover 类。