嘿，我之前也碰到过这个头疼的问题——Vuetify的v-data-table表头默认是不换行的，而且thead的自定义样式经常因为组件的作用域限制不生效。不过咱们有几个实用的办法，帮你搞定长表头的换行需求：

方法一：直接在表头文本中插入HTML换行标签 #

这是最快捷的方式，只要在表头的text字段里加入<br>标签，再开启html: true属性让组件渲染HTML内容就行：

const headers = [
  { 
    text: 'Calories - Very Long Column Name Here<br>which needs to be wrapped to the next line', 
    value: 'calories', 
    align: 'center',
    html: true // 关键：允许渲染HTML标签
  },
  // 其他表头配置...
]

⚠️ 注意：如果你的表头文本来自用户输入或者后端接口，要警惕XSS风险，这种情况更推荐用下面的插槽方法。

方法二：使用自定义表头插槽（更安全灵活） #

Vuetify的v-data-table支持通过插槽自定义表头内容，这种方式完全可控，还能添加额外样式：

<v-data-table :headers="headers" :items="yourData">
  <!-- 针对calories列的自定义表头插槽 -->
  <template v-slot:header.calories>
    <div class="text-center">
      Calories - Very Long Column Name Here<br>
      which needs to be wrapped to the next line
    </div>
  </template>
  <!-- 其他列的自定义插槽... -->
</v-data-table>

这个方法适合需要给表头加特殊样式、图标或者动态内容的场景，完全不用担心XSS问题。

方法三：用CSS强制换行（解决thead样式不生效的问题） #

如果你想让所有表头都自动换行，或者你的样式在thead上不生效，大概率是因为scoped样式的作用域限制。Vuetify的thead元素在组件内部，scoped样式无法直接覆盖，这时候需要用深度选择器来穿透：

Vue2/传统Vue CLI项目（用>>>） #

<style scoped>
/* 穿透scoped样式，修改thead表头的换行行为 */
.v-data-table >>> thead th {
  white-space: normal; /* 取消默认的不换行设置 */
  word-wrap: break-word; /* 长单词自动拆分换行 */
  text-align: center; /* 如果你需要居中对齐 */
}
</style>

Vue3/Vite项目（用:deep()） #

<style scoped>
:deep(.v-data-table thead th) {
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}
</style>

这样就能强制让表头文本自动换行，而且样式会正确生效啦。

内容的提问来源于stack exchange，提问作者vilas