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

在Vuetify数据表中，当标题较长时，排序箭头显示在标题下。我试图使标题中的排序箭头始终与标题显示在同一行上

这是我的数据表：

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

我得到了什么：

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

无论标题的长度如何，我都喜欢什么：

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

---

在

标题

数组项的对象中，可以添加

宽度

值，例如

宽度：6rem

您还可以在此处添加另一个键/值对，通过

类：“我的标题名”

添加自定义CSS类。这将允许您进一步定制显示，例如使用

display:flex；对齐项目：居中

，这取决于您的期望

利用和试验这些方法，你应该能够接近你所寻找的

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