如何在 Quasar 中制作字幕 table

Question

我正在使用 Quasar/cli 开发 Vue3。

如何用Quasar 组件qTable 或qMarkupTable 做这个类别分隔符（蓝色字幕）？ screen

我试图找出 body 个插槽，但我做不到

Link 到 qTable API 文档 https://quasar.dev/vue-components/table#introduction

Link 到 qMarkupTable API 文档 https://quasar.dev/vue-components/markup-table#introduction

Answer 1

对于 QMarkupTable，添加一个 TD 跨越所有列的行：

<q-markup-table>
  <thead>
    <tr>
      <th>№</th>
      <th>Name</th>
      <th>Code</th>
      <th>Diff</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-primary text-white">
      <td colspan="4">Medicines</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mukosolvan</td>
      <td>101492</td>
      <td class="text-negative">1</td>
    </tr>
  </tbody>
</q-markup-table>

QMarkupTable 是一个常规的 HTML table - 它只是在其上应用了适当的样式，其他一切都是相同的 HTML 您作为学生一直在学习。

如何在 Quasar 中制作字幕 table

How to make subtitles in Quasar table

vue.js

vuejs3

quasar