element table透明化及样式处理(CSS)

表格斑马纹背景色修改

自定义斑马线是 row-class-name，通过自定义属性实现个性斑马线
table标签添加属性

 <el-table border :data="transData"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    :span-method="objectSpanMethod"
                    height="450"
                    :row-class-name="tableRowClassName">
                   </el-table>                

在methods通过方法计算返回对应class样式 ，根据需求自定义

tableRowClassName({row, rowIndex}) {
      let index = rowIndex + 1;
      switch (row.equipment) {
        case "参数1":
          if (index % 2 != 0) {
            return 'warning-row'
          }
          break;
        case "参数2":
          if (index % 2 == 0) {
            return 'warning-row'
          }
          break;
        case "参数3":
          if (index % 2 == 0) {
            return 'warning-row'
          }
          break;
      }
    }

表格斑马纹颜色修改css

/deep/ .el-table .warning-row {
  background: rgba(255, 255, 255, 0.08);
}

样式、背景色修改

/deep/ .el-table {
  /* 表格字体颜色 */
  color: white;
  /* 表格边框颜色 */
  border: transparent;
  height: 500px;
  border-bottom: 0;
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 5px; /*滚动条粗细*/
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #00D4FF
  }
}
/*去掉滚动条竖线*/
/deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
  background-color: transparent;
}
/*去掉滚动条剩余横线*/
/deep/ .el-table--border th.gutter:last-of-type {
  border-bottom: transparent;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  font-size: 12px;
  border: 0;
  height: 30px;
  line-height: 30px;
  background-color: transparent;
}
/* 删除表格下横线 */
/deep/ .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/* 表格表头字体颜色 */
/deep/ .el-table thead {
  color: #00D4FF;
  font-weight: 500;
}
/*修改选中背景色*/
/deep/ .el-table__body tr.current-row>td{
  background-color: #00D4FF !important;
  color: #fff;
}
/*修改鼠标悬浮背景色为透明*/
/deep/ .el-table tbody tr:hover > td {
  background-color: transparent;
}