element ui 表格滚动条样式重设方法

阅读 167

2022-10-04


很多场景下我们会重设滚动条的样式,下边把具体实现代码贴出来:

// 兼容火狐
::v-deep .el-table__body-wrapper {
overflow-y: scroll;
scrollbar-color: #bebebf transparent;
scrollbar-width: thin;
}
// 兼容谷歌
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #bebebf;
border-radius: 3px;
}
:deep .el-table__body-wrapper::-webkit-scrollbar-track{
background: #CCCCCC !important;
}

实现效果:

element ui 表格滚动条样式重设方法_ui


精彩评论(0)

0 0 举报