如何为Vuetify的v-data-table组件单独设置自定义滚动条样式

实现方案 #

失效原因 #

v-data-table的滚动条不属于组件根元素，而是在内部的.v-data-table__wrapper可滚动容器上，你直接给根组件绑定id/class设置滚动条伪元素，无法作用到实际产生滚动的容器，因此不生效。

正确实现步骤 #

1. 给目标v-data-table添加自定义类名（避免影响其他组件）

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  class="custom-scroll-table"
>
</v-data-table>

2. 根据你的样式场景选择对应写法：

场景1：非scoped样式（全局样式文件/无scoped属性的style标签）

<style>
/* 仅选中自定义类名下的滚动容器 */
.custom-scroll-table .v-data-table__wrapper::-webkit-scrollbar {
    width: 24px;
    height: 8px;
    background-color: #143861;
}
/* 可选：自定义滚动条滑块样式 */
.custom-scroll-table .v-data-table__wrapper::-webkit-scrollbar-thumb {
    background: #3b7fc4;
    border-radius: 4px;
}
</style>

场景2：scoped样式（带scoped属性的单文件组件style标签）

需要用深度选择器穿透组件样式隔离：

• Vue2写法：

<style scoped>
/deep/ .custom-scroll-table .v-data-table__wrapper::-webkit-scrollbar {
    width: 24px;
    height: 8px;
    background-color: #143861;
}
</style>

• Vue3写法：

<style scoped>
::v-deep .custom-scroll-table .v-data-table__wrapper::-webkit-scrollbar {
    width: 24px;
    height: 8px;
    background-color: #143861;
}
</style>

验证说明 #

如果样式仍不生效，可打开浏览器开发者工具，找到v-data-table内部实际产生滚动的容器，替换上述代码中的.v-data-table__wrapper为对应容器的类名即可。

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