修复elementui修改了el-table组件的滚动条样式后出现的问题问题描述：
众所周知， el-table的滚动条使⽤的是原⽣的滚动条，样式⽐较丑，于是本⼈就擅⾃改动了⼀下滚动条样式，理想中的样⼦是这样的
但是实际是这样的，
出现了显⽰不全，固定列离滚动条距离加宽的问题
下⾯是我修改滚动条⽤的样式
/deep/.el-table__body-wrapper {
&::-webkit-scrollbar {
height: 6px;
width: 6px;
}
&::-webkit-scrollbar-track {
html横向滚动条样式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;
}
}
// 解决表格固定列问题
.el-table__fixed,
.
el-table__fixed-right{
height: calc(100% - 7px) !important;
box-shadow: -5px -2px 10px rgba(0,0,0,.12) !important;
.el-table__fixed-body-wrapper{
height: calc(100% - 36px) !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;
}
效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。