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

【问题标题】：Vuetify - wrap header text on v-data-tableVuetify - 在 v-data-table 上包装标题文本
【发布时间】：2018-09-14 22:38:41
【问题描述】：

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

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

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

谢谢，维拉斯

【问题讨论】：

【解决方案1】：

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

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

但是有一个错误，希望在下一个版本中得到修复，所以它在所有情况下都不起作用，特别是如果你在 v-flex 中使用它。

percantage (width: '100%') 也比 e.g. 更好。 width: '300px'，至少对我来说。

【讨论】：