关于element-ui:透明背景eltable的滚动条及fixed列样式问题

35次阅读

共计 2405 个字符，预计需要花费 7 分钟才能阅读完成。

需要

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>