透明背景el-table的滚动条及fixed列样式问题

需求

• el-table 透明背景 固定列 滚动条的处理 头疼~
  

基础

• node：14.17.3
• @vue/cli 5.0.1
• vue：2.6.12
• element-ui：2.15.6

1.设置表格透明背景后，清除表格下边框线

.el-table th.el-table__cell,
.el-table tr,
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.el-table::before {
  width: 0;
}

2.列表出现纵向滚动条后，隐藏最右侧的空白列

.el-table th.gutter {
  display: none;
  width: 0;
}
.el-table colgroup col[name='gutter'] {
  display: none;
  width: 0;
}

3.添加固定列后，调整固定列的样式

.el-table .el-table__fixed-right {
  height: auto !important;
  bottom: 5px !important;
  right: 4px !important;
  background-color: rgb(1, 10, 23);
  border-left: 1px solid rgba($color: #fff, $alpha: 1);
}
// 固定表格内的table-body
.el-table__fixed-right .el-table__fixed-body-wrapper {
  height: auto !important;
  bottom: 5px !important;
}
// 隐藏固定列表头右侧多出单元格
.el-table .el-table__fixed-right-patch {
  display: none;
}
// 清除固定列右侧边框线
.el-table--border .el-table__cell:last-child {
  border-right: none !important;
}
// 重置固定列单元格背景色
.el-table__fixed-right td.el-table__cell {
  background-color: rgb(1, 10, 23);
}

4.table组件二次封装

相关链接

• https://element.eleme.cn/#/zh...