element table 修改表格表头背景色

修改表头背景色

<el-table
        :data="tableData"
        style="width: 100%"
        max-height="570"
        show-summary
        :header-cell-style="rowClass"  // 属性
      ></el-table>

// 修改表头样式
    rowClass({ row, column, rowIndex, columnIndex }) {
      if(columnIndex === 2){ // 第几列
        if(rowIndex === 0){
          return {background: '#FAEBD7'};
        }
      } else if(columnIndex === 3){
        if(rowIndex === 0){
          return {background: '#F0FFFF'};
        }
      } else if(columnIndex === 4){
        if(rowIndex === 0){
          return {background: '#F5F5DC'};
        }
      }
    }

修改表头字体颜色

<el-table
        :data="tableData"
        style="width: 100%"
        max-height="570"
        show-summary
        :header-cell-style="rowClass"
        :cell-style="{ padding: '3px 0'}"  // 修改表格行高
></el-table>

 <el-table-column label="金条" align="center" class-name="custom-header-text">
     <el-table-column prop="goldWeight" label="克重" align="center"></el-table-column>
     <el-table-column  prop="goldPayMoney" label="实付金额(元)" align="center"></el-table-column>
 </el-table-column>

::v-deep .custom-header-text .cell {
    font-size: 18px; /* 指定字体大小 */
    background-color: #FAEBD7;
  }

修改多级表头背景色

// 修改表头样式
    rowClass({ row, column, rowIndex, columnIndex }) {
      // 金条
      if(columnIndex === 2){
        if(rowIndex === 0){
          return {background: '#FFFFE0'};
        }
      } 
      // 这行
      if(rowIndex === 1){ // 第几行
        if(columnIndex <= 1){  // 第几列
          return {background: '#FFFFE0'};
        }
      }
      
      // 手机
      if(columnIndex === 3){
        if(rowIndex === 0){
          return {background: '#F5F5DC'};
        }
      }  
      if(rowIndex === 1){
        if(columnIndex <= 3){
          return {background: '#F5F5DC'};
        }
      }
      // 茅台
      if(columnIndex === 4){
        if(rowIndex === 0){
          return {background: '#FAEBD7'};
        }
      }
      if(rowIndex === 1){
        if(columnIndex <= 5){
          return {background: '#FAEBD7'};
        }
      }
    }