更改el-table头部背景色

43 阅读1分钟

image.png

.bottom-half {
  margin-top: 20px;
  background: url("/src/assets/cops/statistics/bottom_bg.png") no-repeat;
  background-size: 100% 100%;

  :deep(.el-table) {
    background: transparent !important;
    .el-table__header th {
      background-color: transparent !important;
      color: #fff;
    }
    .el-table__header tr {
      background: url("/src/assets/cops/statistics/right_table_header.png") no-repeat !important;
      background-size: 100% 100% !important;
      color: #fff;
    }
  }

  :deep(.el-table .el-table__body) {
    tr:nth-child(even) {
      background-color: #001351 !important; /* 偶数行(斑马线)的默认背景色 */
    }

    tr:nth-child(odd) {
      background-color: #001F5E !important; /* 奇数行(斑马线)的默认背景色 */
    }
  }
}

div.bottom-half为父元素 首先对.el-table__header中的所有th进行背景色透明处理 然后对.el-table__header中的tr进行处理