透明背景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组件二次封装

<style lang="scss">
  .table-wrapper {
    @include scrollBar($track-color: null);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 4px;

    .table-head {
      padding: px2rem(5) 0 !important;
      color: #fff;
      font-weight: 400;
      background-color: rgba(204, 204, 204, 0.3) !important;
    }

    .table-row {
      padding: px2rem(5) 0 !important;
      color: #fff;
    }

    .el-icon-loading {
      font-size: px2rem(30);
    }

    //#region 重置样式

    // 固定列
    .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);
    }
    // 清除单元格最外层
    .el-table.el-table--border {
      border: none;
    }
    // 清除单元格初始内边距
    .el-table .el-table__cell {
      padding: unset;
    }
    // 清除透明背景下表格底部边框线
    .el-table::before {
      width: 0;
    }

    // 清空背景色
    .el-table th.el-table__cell,
    .el-table tr,
    .el-table,
    .el-table__expanded-cell {
      background-color: transparent;
    }
    // 非固定列row hover & 固定列row hover
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
    .hover-row td.el-table__cell {
      background-color: #284866 !important;
    }

    // 滚动条列优化 隐藏table gutter列和内容区右侧的空白
    .el-table th.gutter {
      display: none;
      width: 0;
    }
    .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }
    //#endregion
  }
</style>

相关链接

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