作文网站投稿,管理平台,哪些行业对做网站的需求大,舟山建设信息港当前elementui版本#xff1a;2.8.2 现象#xff1a;此处el-table__body-wrapper默认的滚动条宽度为8px#xff0c;我加大到10px#xff0c;如果不设置fixed一切正常#xff0c;设置fixed后会被遮挡一点 el-table__fixed-right::before, .el-table__fixed::before 设置…当前elementui版本2.8.2 现象此处el-table__body-wrapper默认的滚动条宽度为8px我加大到10px如果不设置fixed一切正常设置fixed后会被遮挡一点 el-table__fixed-right::before, .el-table__fixed::before 设置css解决遮挡
// 左固定列
.el-table__fixed {height: calc(100% - 10px) !important;
}// 右固定列
.el-table__fixed-right {height: calc(100% - 10px) !important;right: 10px !important;
}// 设置右固定列才会出现该元素不然不用写
.el-table__fixed-right-patch {width: 10px !important;
}// 设置这一句是因为当滚动条向下滑动时固定列的行会和其他列的行错位设置完这个就不错位了
.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 10px;box-sizing: border-box;
}// 设置这句是因为上第二张图在某些场景下那条线会很突兀就设置颜色透明让视觉上看不见
.el-table__fixed-right::before, .el-table__fixed::before {background: transparent !important;
}// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar {width: 10px; height: 10px; background: transparent;border-radius: 4px;
}.el-table__body-wrapper::-webkit-scrollbar-thumb {// background-color: rgba(94, 171, 246, .79);border-radius: 12px;
}如果能够确保表格在任何屏幕下都会出现横向滚动和竖向滚动那么上述设置已经够了。 但我有一张表可以筛选列就导致当列选的比较少时不会出现横向滚动如果最后一行数据恰巧换行有部分文字正好会被固定列的height: calc(100% - 10px) !important遮挡住如下图所示所以就要兼容两种情况 由于我发现出现横向滚动条时el-table__body-wrapper会出现类名is-scrolling-right或is-scrolling-left或is-scrolling-middle无横向滚动时el-table__body-wrapper的类名叫做is-scrolling-none就可以利用这一点再设置无横向滚动时的css // ~用于选择某个元素之后的兄弟元素
// el-table__fixed是左固定列要设置右固定列就是写:
// .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {}
.el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed {height: 100% !important; .el-table__fixed-body-wrapper {right: 2px !important;}
}最后反正具体css设置还要看自己项目的当前情况但是方法是这么个方法可以通过这些类名去设置以达到目的
