vuetify 中的垂直表头

Posted 2023-02-16

【中文标题】vuetify 中的垂直表头

【英文标题】：Vertical table header in vuetify

【发布时间】：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 制作垂直表格吗？

【参考方案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>