Vuetify - 在v-data-table上包装头文本

Question

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

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

{text：Calories - Very Long Column Name Here which needs to be wrapped to the next line，价值：＆＃39;卡路里＆＃39; ，对齐：＆＃39; center＆＃39;，}

请参阅此code pen link

谢谢， 维拉斯

Answer 1

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

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

但是有一个bug，希望可以在下一版本中修复，因此它不能在所有情况下都有效，尤其是如果您在v-flex中使用它时，则不能。

percantage（width: '100%'）比例如width: '300px'，至少对我来说。