css - Vuetify - 在 v-data-table 上包装标题文本

Question

我正在努力将标题文本包装在 v-data-table 组件上。我尝试将样式应用于组件 - 正在应用我应用于表中 tbody 元素的任何样式。但是，我无法获得任何适用于标题(thead 元素)的自定义样式。请帮忙。

例如，如果我有这样的标题，我该如何包装它？

{ text: Calories - Very Long Column Name Here which needs to wrapped to the next line, value: 'calories' , align: 'center',}

请看这个code pen link

谢谢，维拉斯

Answer 1

您可以在 headers 属性中控制宽度。它是一个对象数组，每个对象描述一个标题列。有关所有属性的定义，请参见下面的示例。

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}

但是有一个错误，希望在下一个版本中得到修复，所以它并不是在所有情况下都有效，尤其是当你在 v-flex 中使用它时。

此外 percantage (width: '100%') 比例如width: '300px'，至少对我来说是这样。