在 Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式，可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar，而不是浏览器默认的滚动条。因此，需要针对 el-scrollbar 组件进行样式定制。
<style scoped>
/* 滚动条整体部分 */
::v-deep .el-scrollbar__bar {
opacity: 1; /* 使滚动条不透明 */
}
/* 横向滚动条的滑块 */
::v-deep .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
border-radius: 1px; /* 滑块的圆角 */
background-color: #a40808; /* 滑块的背景颜色 */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /* 滑块的阴影 */
}
/* 纵向滚动条的滑块 */
::v-deep .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
border-radius: 1px;
background-color: #ea0909;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
/* 滚动条的轨道部分 */
::v-deep .el-scrollbar__wrap {
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景颜色 */
}
}
/* 修改滑块宽度 */
::v-deep .el-scrollbar__bar.is-horizontal {
height: 12px;
}
::v-deep .el-scrollbar__bar.is-vertical {
width: 12px;
}
</style>
可以将这些样式添加到你的全局样式文件中，或者直接在组件的 < style > 标签内使用 scoped 属性来局部应用这些样式。
请注意，这些样式是针对 WebKit 内核的浏览器（如 Chrome 和 Safari）的。
根据需求更改滚动条样式
