el-table, .el-table__fixed-right左固定列挡住底部滚动条的解决方法

codeslag

已于 2022-12-10 16:36:23 修改

阅读量957

点赞数 2

文章标签： css javascript elementui

于 2022-12-10 16:35:27 首次发布

本文链接：https://blog.csdn.net/weixin_43582723/article/details/128266442

版权

el-table, .el-table__fixed-right左固定列挡住底部滚动条的解决方法

二者的值相等

滚动条的高度与.el-table__fixed-right的bottom值相等

//滚动条样式
  ::-webkit-scrollbar {
    width: 17px;
    height: 17px;
    background-color: #f0f0f0;
    border: none;
  }

//右固定列样式
@mixin rightFixedStyle($bottom) {
  height: auto !important;
  bottom: $bottom !important;
  left: auto;
  right: 0;
}

//表格有滚动条情况下固定列的样式
.el-table .el-table__fixed-right {
  @include rightFixedStyle(17px)
}

没有滚动条列表的情况下会出现样式错乱的问题，这样解决!

//与上面的样式相对应，在没有滚动条的情况下回复原状
.el-table__body-wrapper.is-scrolling-none ~ 
.el-table__fixed, .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {
  @include rightFixedStyle(0px)
}