vue3+element-plus table表格自定义背景，表头，斑马条纹颜色_el-table修改斑马背景

效果图

表格代码 

          <el-table :data="tableData"
            style="width: 99.97%;--el-table-border-color: none;border-right: 1px #143275 solid;border-left: 1px #143275 solid;border-bottom: 1px #143275 solid;"
            :highlight-current-row="false"
            :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px #154480 solid', borderBottom: '1px #154480 solid' }"
            :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #143275 solid', borderLeft: '0.5px #143275 solid' }"
            :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', }" :row-class-name="tableRowClassName"
            empty-text="暂无数据" max-height="818">
            <el-table-column prop="date" label="项目编号" />
            <el-table-column prop="name" label="项目名称" />
            <el-table-column prop="state" label="项目交期" />
            <el-table-column prop="city" label="机型" />
            <el-table-column prop="city" label="数量" />
            //合并列
            <el-table-column label="生产进度">
              <el-table-column prop="zip" label="焊接" />
              <el-table-column prop="zip" label="喷镀" />
            </el-table-column>
          </el-table>

 注：element-plus的table表格里面有自带的斑马条纹属性 stripe不需要写，否则自定义斑马条纹颜色样式不生效

css代码

/*  
// 表格部分样式
 // 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
  color: #93dcfe;
  font-size: 24px;
}
 
/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border: 0px;
  color: #93dcfe;
  font-size: 24px;
  height: 5px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
 
/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}
 
/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 54px;
}
 
/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover>td {
  background: #063570 !important;
}
 
/* // 取消当前行高亮 */
::v-deep .el-table tbody tr {
  pointer-events: none;
}
 
/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */
 
/* // 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
  background: #01205A;
}
 
 
/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}