移动端v-data-table保持常规表头布局的实现方案咨询

要让v-data-table在移动端不切换为每行带表头的堆叠模式，保持桌面端的单表头+数据行布局，有两个直接可行的方法：

方法一：使用Vuetify自带属性禁用移动端模式 #

Vuetify的v-data-table提供了disable-mobile属性，添加后会强制表格始终使用桌面布局，不会在移动端切换为堆叠样式。为了避免移动端屏幕过窄导致表格内容截断，建议给表格套一个带横向滚动的容器：

<template>
  <!-- 外层容器提供横向滚动，避免内容溢出截断 -->
  <div style="overflow-x: auto; padding: 0 16px;">
    <v-data-table
      :headers="yourHeaders"
      :items="yourItems"
      disable-mobile
      <!-- 其他你需要的表格属性 -->
    ></v-data-table>
  </div>
</template>

这个方法操作最简单，不需要额外编写CSS，适合大多数常规场景。

方法二：自定义CSS覆盖堆叠样式 #

如果需要更灵活的样式控制，或者不想依赖组件自带属性，可以通过CSS覆盖Vuetify的移动端堆叠样式：

/* 针对移动端屏幕（分界宽度可根据需求调整） */
@media (max-width: 960px) {
  /* 隐藏每行前的堆叠表头标签 */
  .v-data-table--mobile tbody tr td:before {
    display: none;
  }
  /* 恢复单元格默认对齐方式，保持行分隔线 */
  .v-data-table--mobile tbody tr td {
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.12);
  }
  /* 强制显示顶部的表头区域 */
  .v-data-table--mobile thead {
    display: table-header-group;
  }
}

注意：不同Vuetify版本的DOM类名可能略有差异，需要根据实际页面的DOM结构微调CSS选择器。

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