美文网首页
element table操作栏划到低出现偏差

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

作者: 弦生_a3a3 | 来源:发表于2021-10-26 10:17 被阅读0次

    当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;
    }
    

    相关文章

      网友评论

          本文标题:element table操作栏划到低出现偏差

          本文链接:https://www.haomeiwen.com/subject/ugmealtx.html