vue.js - 如何使用Vuetify反转 header 方向？

标题中几乎所有内容都已说明。

在文档中，Vuetify用所有具有相同属性的多重对象构建表。像这样:

https://vuetifyjs.com/en/components/data-tables

headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Actions', value: 'action', sortable: false },
      ]

这将在第一行显示标题，然后您将具有不同的Dessert对象的列表。

我需要的是在第一列中垂直显示标题，然后在第二列中显示该对象的值。这样，密码和安全性问题就是我的2个标题:



关于如何使用Vuetify进行构建的最佳示例是什么？

最佳答案

如果您真的想为此使用数据表，则可以使用flex-box在CSS中简单地做到这一点。

添加以下CSS(您可能希望创建单独的类以防止与其他表冲突)。

table tr {
   display:flex;
   flex-direction: column;
   float: left;
}

thead,tbody {
  float: left;
}

这是Codepen https://codepen.io/pixelskribe/pen/VwwLwXa上的工作示例

关于vue.js - 如何使用Vuetify反转 header 方向？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58289445/