vuetify 中的垂直表头答案

【问题标题】：Vertical table header in vuetifyvuetify 中的垂直表头
【发布时间】：2021-09-12 08:11:15
【问题描述】：

我需要显示一个带有垂直标题的表格，而不是传统的水平标题。由于该表必须位于另一个使用 Vuetify 的表下，因此我也想使用 Vuetify 使用相同的布局制作垂直表。

在普通的 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 制作垂直表格吗？

【问题讨论】：

标签： html css vue.js vuejs2 vuetify.js

【解决方案1】：

您可以在 v-data-table 中指定带有插槽的正文。

 <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>

【讨论】：