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