vue table表格头部设置样式(header-cell-style/header-cell-class-name)

vue中表格的头部更改掌握这两种方法想改哪个地方都能改

• header-cell-style这种方式可以直接ruturn "color: #fff;background:#00bfbf"
• header-cell-class-name这种只是返回一个class

至于为什么，直接上代码

HTML示例

<el-table :data="formData.bomList" 
   @selection-change="handleSelectionChange"
   id="table-form" max-height="300"
  :header-cell-style="tableHeaderCellStyle"
  :header-cell-class-name="headerRowStyle"
  style="margin:20px 0">
    <el-table-column type="selection" fixed align="center"></el-table-column>
    <el-table-column label="订单信息" align="center" background="#027db4">
      <el-table-column label="品名" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)"
            size="mini" placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.gradeName"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>图号</span>
        </template>
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.picNo"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>版次</span>
        </template>
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.picVersion"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>材质</span>
        </template>
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.materialQuality"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="订单数量" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>单位</span>
        </template>
        <template slot-scope="scope">
          <el-select v-model="scope.row.unitNo" placeholder="请选择" size="mini"
          @keydown.enter.native="nextFocus(formData.bomList,$event,scope)">
            <el-option
              v-for="item in options7"
              :key="item.unitNo"
              :label="item.unitName"
              :value="item.unitNo">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>物料来源</span>
        </template>
        <template slot-scope="scope">
          <el-select v-model="scope.row.materialSource" placeholder="请选择" size="mini"
          @keydown.enter.native="nextFocus(formData.bomList,$event,scope)">
            <el-option
              v-for="item in options8"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="交期" width="150" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>交期</span>
        </template>
        <template slot-scope="scope">
          <el-date-picker @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
            style="width: 100%" v-model="scope.row.deliveryTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            type="date" placeholder="选择日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.remark"></el-input>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column label="备料信息" align="center">
      <el-table-column label="材质" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="品名" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="料号" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="材料类型" width="150" align="center">
        <template slot="header">
          <span class="btnWarn">*</span>
          <span>交期</span>
        </template>
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="长度" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="宽度" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="厚度" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="备料件数" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="重量" width="150" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column label="排配信息" align="center" style="background:00bfbf;">
      <el-table-column label="加工制程" width="150" class-name="addColumn" align="center">
        <template slot-scope="scope">
          <el-input @keydown.enter.native="nextFocus(formData.bomList,$event,scope)" size="mini"
              placeholder="请输入内容" maxlength="25" v-model.trim="scope.row.totalNum"></el-input>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column label="操作" width="200" fixed="right" class-name="small-padding fixed-width" align="center">
      <!-- <template slot-scope="scope"> -->
        <!-- <el-button size="mini" type="text"
          icon="el-icon-delete" class="btn_del" @click="delect(scope.$index)">删除
        </el-button> -->
        <el-button type="text" size="mini">图档上传</el-button>
        <el-button type="text" size="mini">委外</el-button>
        <el-button type="text" size="mini">派工作业</el-button>
      <!-- </template> -->
    </el-table-column>
  </el-table>

图片示例

1.header-cell-style

tableHeaderCellStyle({row,column,rowIndex, columnIndex}) {
 let cellStyle1;
 let cellStyle2;
 let cellStyle3;
 cellStyle1= "color: #fff;background:#027db4"
 cellStyle2= "color: #fff;background:#70b603"
 cellStyle3= "color: #fff;background:#00bfbf"
 if(columnIndex >= 0 && columnIndex < 9 && rowIndex===1){
   return cellStyle1;
 }
 if(columnIndex > 8 && columnIndex < 18 && rowIndex===1){
   return cellStyle2;
 }
 if(columnIndex === 18 && rowIndex===1){
   return cellStyle3;
 }
},

2.header-cell-class-name

headerRowStyle(obj){
  if(obj.column.type=="selection"){
    return 'ddxxys';
  }
  if(obj.column.label=="订单信息"){
    return 'ddxxys';
  }
  if(obj.column.label=="备料信息"){
    return 'blxxys';
  }
  if(obj.column.label=="排配信息"){
    return 'ppxxys';
  }
  if(obj.column.label=="操作"){
    return 'czanys';
  }
},

<style>
  .ddxxys {
    background: #027db4 !important;
    color: #fff !important;
  }
  .blxxys {
    background: #70b603 !important;
    color: #fff !important;
  }
  .ppxxys {
    background: #00bfbf !important;
    color: #fff !important;
  }
  .czanys {
    background: #02a7f0 !important;
    color: #fff !important;
  }
</style>

遇到的坑

1. 可以看到通过这两种方式都能够获取到column，一个添加的是class一个是直接的样式
2. 如果你试着想通过elements找到标签上的class去设置样式，你会发现样式设置上去了，但是你点击另一个的表格，再回来就会发现class已经变了
3. 千万不要使用column的id去做判断，这个id是会改变的

结语

本文就分享到这，希望对你有帮助 😃

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知