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

Posted 2023-02-22

【中文标题】Vuetify - 在 v-data-table 上包装标题文本

【英文标题】：Vuetify - wrap header text on 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',

请看这个code pen link

谢谢， 维拉斯

【问题讨论】：

您可以在您的标头对象（在标头数组内）上添加class 属性，然后将类应用于标头。 Docs说你也可以加width，但是好像不行？

【参考方案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'，至少对我来说。