如何禁用Vuetify DataTable的水平滚动条？

核心问题说明 #

Vuetify DataTable的横向滚动条由内部的.v-data-table__wrapper容器控制，你之前尝试的.v-data-table或.v-data-table-wrapper选择器可能不准确，或是样式优先级不足导致未生效。以下是几种可行的解决方法：

方法1：精准覆盖滚动容器样式

使用深层CSS选择器穿透Vuetify内置样式，强制禁用横向滚动：

/* Vue单文件组件的scoped样式中，需用深度选择器 */
::v-deep .v-data-table__wrapper {
  overflow-x: hidden;
}

/* 非scoped样式直接编写 */
.v-data-table__wrapper {
  overflow-x: hidden;
}

如果样式仍不生效，可添加!important提升优先级（仅必要时使用）：

::v-deep .v-data-table__wrapper {
  overflow-x: hidden !important;
}

方法2：让单元格内容自动换行避免溢出

如果允许单元格内容换行，可修改单元格样式从根源上消除横向溢出，自然不会触发滚动条：

::v-deep .v-data-table th,
::v-deep .v-data-table td {
  white-space: normal;
  word-break: break-word;
}

方法3：结合组件属性控制布局

确保DataTable宽度自适应父容器，避免自身触发横向滚动逻辑：

<v-data-table
  :items="yourItems"
  :headers="yourHeaders"
  style="width: 100%;"
></v-data-table>

再配合方法1的CSS设置，即可完全禁用内置横向滚动，让你的自定义滚动包装器接管。

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