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'};
        }
      }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容