美文网首页
Element-UI vue2.0版本的table样式补丁

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

作者: A云A | 来源:发表于2022-12-08 10:35 被阅读0次

有各种原因依然要得用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;
}

相关文章

网友评论

      本文标题:Element-UI vue2.0版本的table样式补丁

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