Element Ui 表格自定义滚动条,以及自定义滚动条后出现空白问题
Element Ui 表格自定义滚动条,以及自定义滚动条后出现空白问题
·
一. Element Ui默认滚动条是这样的:
如图红色框中所示,table右侧预留了滚动条的位置,修改滚动条样式之后,element ui计算这个预留宽度有点问题,导致留白:
二、修改滚动条样式代码如下:
:deep .el-table__body-wrapper::-webkit-scrollbar{
width: 10px !important;
height: 10px !important;
}
:deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
background: #E5E5E5 !important;
}
:deep .el-table__body-wrapper::-webkit-scrollbar-track{
background: #CCCCCC !important;
}
提示:需要用到样式穿透:deep,否则可能不能覆盖原有样式,vue2使用/v-deep/或者::v-deep,或者取消scoped,但不推荐,因为会影响到其他页面样式
三、处理空白问题:
:deep .el-table colgroup col[name='gutter']{
width: 11px;
}
:deep .el-table__body{
width: 100% !important;
}
最终效果如下:
如果对你有帮助记得点赞哟!
更多推荐
已为社区贡献2条内容
所有评论(0)