vuetify 中的垂直 table header

Question

我需要显示带有垂直 header 而不是传统水平 header 的 table。由于 table 必须在另一个使用 Vuetify 的 table 之下，我想使用 Vuetify 使用相同的布局来制作垂直 table。

简单地说 html/css 我知道您可以使用 TH 作为行来选择它：

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>b</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

但是，Vuetify 不允许对其框架进行太多修改，我找不到任何其他方式使用他们的文档：https://vuetifyjs.com/en/components/data-tables/

有没有其他方法可以使用 Vuetify 制作垂直 table？

Answer 1

您可以在 v-data-table 内指定带有插槽的 body。

 <v-data-table
            :items="desserts">
            <template v-slot:body="{ items }">
                <tbody>
                <tr v-for="header in headers">
                    <td>
                        {{ header.text }}
                    </td>
                    <td v-for="item in items">
                        {{ item[header.value] }}
                    </td>
                </tr>
                </tbody>
            </template>
        </v-data-table>

vuetify 中的垂直 table header

Vertical table header in vuetify

html

css

vue.js

vuejs2

vuetify.js