在网上搜了很多关于修改滚动条样式的方式 发现都是vue2的,这个也是为什么在vue3中不适用的原因,因为vue3新增了el-scrollbar 组件,所以在el-table中用el-scroolbar组件代替了原生的滚动条,网上那种vue2 修改滚动条的方式正好是原生滚动条的修改方式,所以不生效。
原生滚动条修改方式:
/* ---滚动条公共样式--- */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /*轨道阴影*/
border-radius: 0px; /*轨道背景区域的圆角*/
background-color: transparent; /*轨道的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 2px; /*滑块圆角*/
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /*滑块外阴影*/
background-color: rgba(136, 219, 255, 1); /*滑块背景颜色*/
}
vue3修改滚动条的方式:
/* ---el-table滚动条公共样式--- */
.el-scrollbar {
// 横向滚动条
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
opacity: 1; // 默认滚动条自带透明度
height: 8px; // 横向滑块的宽度
border-radius: 2px; // 圆角度数
background-color: rgba(136, 219, 255, 1); // 滑块背景色
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
}
// 纵向滚动条
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
opacity: 1;
width: 8px; // 纵向滑块的宽度
border-radius: 2px;
background-color: rgba(136, 219, 255, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
}
上述方法来源于 以为博主的文章,受益匪浅! 博主还记录了固定列fixed的坑,还有表头超出隐藏显示省略号的功能 :【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号_el-table超出隐藏_沉辞览调的博客-CSDN博客