Element-UI vue2.0版本的table样式补丁

有各种原因依然要得用vue2.0, el-tabel有固定列的时候错乱问题


// to fix el-table css style
.el-table thead tr{ 
  line-height: 15px;
}

.el-table__fixed-right:has(.el-table__fixed-footer-wrapper), .el-table__fixed:has(.el-table__fixed-footer-wrapper){ 
  bottom: 0 !important;
}

// fix:汇总表格里滚动条区域穿透处理
.el-table__fixed-right, .el-table__fixed{ 
  bottom: 13px !important;
  pointer-events: none;
}
.el-table__fixed-right *, .el-table__fixed *{ 
  pointer-events: auto;
}
.el-table__fixed-right-patch{
  pointer-events: none;
}

// fix:汇总右侧底部添加遮罩
.el-table:has(.el-table__footer-wrapper):after {
  width: 15px;
  height: 45px;
  position: absolute;
  background: #f5f7fa;
  top: calc(100% - 45px);
  border-right: 1px solid #e6ebf5;
  border-bottom: 1px solid #e6ebf5;
  border-top: 1px solid #e6ebf5;
}
.el-table__fixed-right-patch{
  border-right: 1px solid #e6ebf5;
  box-sizing: content-box;
  background: #F5F7FA;
}

.el-table__fixed-right{
  box-shadow: -10px 0px 10px 0px #0000000f;
  border-left: 1px solid #46629930;
}
.el-table__body-wrapper.is-scrolling-right ~ .el-table__fixed-right {
  border-left: none !important;
}

.el-table__fixed{
  border-right: 1px solid #46629930;
}
.el-table__body-wrapper.is-scrolling-left ~ .el-table__fixed {
  border-right: none !important;
}

.el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed, .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {
  height: 100%;
  border:0;
}
.el-table thead.is-group{
  color:#492c7b;
  font-size: 13px;
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容