element el-table修改滚动条样式后出现露出的问题

最新推荐文章于 2024-05-11 11:39:40 发布

UpSeven0

最新推荐文章于 2024-05-11 11:39:40 发布

阅读量217

点赞数

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/qq_34811855/article/details/131829673

版权

.el-table .el-table__body-wrapper {
   &::-webkit-scrollbar-track-piece {
     background: #d3dce6;
   }

   &::-webkit-scrollbar {
     width: 10px;
     height: 10px;
   }

   &::-webkit-scrollbar-thumb {
     background: #99a9bf;
     border-radius: 20px;
   }
 }

 // 不同尺寸表格修改固定列内容区的高度,  本人这里只罗列了mini与small尺寸的

 .el-table__fixed,
 .el-table__fixed-right {
   .el-table__fixed-body-wrapper {
     // mini表格, 表头高度为36px, 所以这里减36
     height: calc(100% - 39px) !important;
   }
 }

 .el-table__fixed,
 .el-table__fixed-right {
   height: calc(100% - 10px) !important;
 }

 // 当表格没有滚动条时
 .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,
 .el-table__body-wrapper.is-scrolling-none~.el-table__fixed {
   height: 100% !important;
   bottom: 0 !important;
   box-shadow: none !important;
 }

 // 当表格有纵向滚动条时
 .el-table--scrollable-y .el-table__fixed-right {
   right: 10px !important;
 }

 // 当表格只有横向滚动条，没有纵向滚动条时
 .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
   right: 0 !important;
 }

 // 当表格只有纵向滚动条，没有横向滚动条时
 .el-table--scrollable-y:not(.el-table--scrollable-x) {

   .el-table__fixed,
   .el-table__fixed-right {
     .el-table__fixed-body-wrapper {
       height: calc(100% - 32px) !important;
     }
   }
 }