vue3.0 Element Plus修改el-table表格的横纵滚动条颜色、宽高等样式，不生效

el-table 滚动条样式修改：



在 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>



--------------------------------------------------

                        
原文链接：https://blog.csdn.net/weixin_45652809/article/details/143034517

可以将这些样式添加到你的全局样式文件中，或者直接在组件的 < style > 标签内使用 scoped 属性来局部应用这些样式。


请注意，这些样式是针对 WebKit 内核的浏览器（如 Chrome 和 Safari）的。