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, value: 'calories' , align: 'center',}

请看这个代码笔链接

谢谢，维拉斯

Answer 1

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

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

但是有一个错误，希望在下一个版本中得到修复，因此它并不是在所有情况下都有效，特别是如果您在v-flex.

另外 percantage ( width: '100%') 比 eg 效果更好width: '300px'，至少对我来说是这样。