问题描述:
众所周知, el-table的滚动条使用的是原生的滚动条,样式比较丑,于是本人就擅自改动了一下滚动条样式,理想中的样子是这样的
但是实际是这样的,
出现了显示不全,固定列离滚动条距离加宽的问题
下面是我修改滚动条用的样式
/deep/.el-table__body-wrapper {
&::-webkit-scrollbar {
height: 6px;
width: 6px;
}
&::-webkit-scrollbar-track {
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #409eff;
}
}
解决问题
因为默认的固定列偏移的位置刚好是原生滚动条的宽度,所以主要是通过修改一下偏移量去解决问题
下面的样式是完整样式,也可以叫做修改elementui的表格滚动条样式
// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
&::-webkit-scrollbar {
height: 6px;
width: 6px;
}
&::-webkit-scrollbar-track {
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #409eff;
}
}
// 解决表格固定列问题
// 不同尺寸表格修改固定列内容区的高度, 本人这里只罗列了mini与small尺寸的
.el-table--mini {
.el-table__fixed,
.el-table__fixed-right {
.el-table__fixed-body-wrapper {
// mini表格, 表头高度为36px, 所以这里减36
height: calc(100% - 36px) !important;
}
}
}
.el-table--small {
.el-table__fixed,
.el-table__fixed-right {
.el-table__fixed-body-wrapper {
// small表格
height: calc(100% - 40px) !important;
}
}
}
.el-table__fixed, .el-table__fixed-right {
height: calc(100% - 6px) !important;
}
// 当表格没有滚动条时
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{
height: 100% !important;
bottom: 0 !important;
box-shadow: none !important;
}
// 当表格有纵向滚动条时
.el-table--scrollable-y .el-table__fixed-right{
right: 7px !important;
}
// 当表格只有横向滚动条,没有纵向滚动条时
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right{
right: 0 !important;
}
效果