绑定 Vuetify 数据表样式，以便排序箭头始终与标题在同一行 - 而不是在下面？

Question

在Vuetify数据表中，当表头较长时，表头下方会出现排序箭头。我试图让标题中的排序箭头始终与标题出现在同一行。

这是我的数据表：

<v-data-table
      :headers="headers"[![enter image description here][2]][2]
      :items="truncatedRows"
      :items-per-page="5"
      class="elevation-1"
 ></v-data-table>

我得到什么：

无论标题的长度如何，我想要什么：

Answer 1

.v-data-table-header th {
  white-space: nowrap;
}

https://github.com/vuetifyjs/vuetify/issues/10164

Answer 2

在headers数组项的对象中，您可以添加一个width值，例如width: 6rem。

您还可以在此处添加另一个键/值对，以通过class: 'my-header-name'. 这将允许您进一步自定义显示，例如display: flex; align-items: center根据您的期望使用效果很好的显示。

利用和试验这些方法，您应该能够接近您正在寻找的东西。