element table操作栏划到低出现偏差

2021-10-26  本文已影响0人  弦生_a3a3

当table表格中出现操作栏且出现横纵滚动条时候,纵向滚动条滑动到底部之后会出现偏差性。使其表格信息与操作栏的位置不一致。
如果每行表格高度占4rem,则设置el-table__fixed-body-wrapper:

 ::v-deep  .el-table__fixed-body-wrapper{
       padding-bottom:4rem ;
    }

如滚动条遮挡住了table栏则移动滚动条位置

     // 滚动条的宽度
  ::v-deep  .el-table__body-wrapper::-webkit-scrollbar {
    width: .6rem; // 横向滚动条
    height: .6rem; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  ::v-deep  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
::v-deep  .el-table {
.el-table__fixed {
    height: 50rem !important; // 此处的important表示优先于element.style
    bottom: 50px !important; // 改为自动高度后,设置与父容器的底部距离,则高度会动态改变
  }
}
::v-deep .el-table__body-wrapper {
  z-index: 2
}
// 当没有滚动条的时候
::v-deep .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{
  right: 0 !important;
}
// 当有滚动条的时候 默认偏移距离
::v-deep .el-table--scrollable-y .el-table__fixed-right{
  height: auto !important; // 此处的important表示优先于element.style
  right: .6rem !important;
  bottom: .6rem;
}


::v-deep  .el-table::after{
    position: relative;
}
上一篇下一篇

猜你喜欢

热点阅读