解决el-table在使用fixed属性,使用rgba设置表格背景色时候,背景色重叠混乱的问题。

725 阅读1分钟

1、需求是这样的表格

image.png

2、修改背景样式(rgba(255, 255, 255, 0.08)),由于使用这种透明背景,造成以下现象:

image.png

3、发现右侧的固定列样式多一层背景色,无论hover状态还是默认状态都有,很苦恼。

4、后来发现我使用:row-class-name="tableRowClassName";

tableRowClassName: {
  // 表格行的类名
  type: String,
  default: 'rowClass'
};

给类名.rowClass设置行背景样式的时候会重复给操作列设置背景色,造成重叠。

5、故设置去掉固定列背景色就可完美解决(样式我是使用的lang = "scss")

.el-table__fixed-right{
  background-color: unset !important;
  .el-table__fixed-header-wrapper{
    .headClass{
      th {
        background-color: unset !important;
      }
    }
  }
  .el-table__fixed-body-wrapper{
    .el-table__body{
      .rowClass{
        background-color: unset !important;
        &.hover-row {
          background-color: unset !important;
          .colDelBg{
            // class-name | 列的 className | 在<el-table-column class-name="colDelBg"></el-table-column>标签上设置列类名
            background-color: unset !important;
          }
        }
      }
    }
  }
}

image.png (仅记录一下问题,大佬不喜勿喷。)