el-table里面滚动条修改样式
在vue文件中定义一个class属性
在样式中表下的属性设置滚动条的属性
.tableListValue{
width: 19vw;
margin-left: 0.8vh;
//滚动条的宽高
::-webkit-scrollbar {
width: 2.1vh;
height: 2.1vh;
}
//滚动条的滑块背景色
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 1vh;
}
//滚动条的背景色
::-webkit-scrollbar-track {
background: rgba(#ccc,0.3);
}
}
展示的效果:
其他地方加入滚动体可以按照这个方式
overflow-y: scroll; /*y轴溢出显示滚动条*/
&::-webkit-scrollbar {
width: 0.3vw; /* 纵向滚动条 宽度 */
height: 0.1vh; /* 横向滚动条 高度 */
}
/* Track */
&::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: #4bc1ff;
border-radius: 0.8vh;
}