element el-table表格表头某一列表头文字或者背景修改颜色

 效果如下

整体代码 ，具体方法在最下面！

    <el-table v-loading="listLoading" :data="sendReceivList"  element-loading-text="Loading" border fit ref="tableList"  :header-cell-class-name="addClass"  highlight-current-row @selection-change="handleSelectChange" :row-key="getRowKey"><el-table-column label="单位" align="center" width="60px"><template slot-scope="scope"><div>{{ scope.row.unit }}</div></template></el-table-column><el-table-column label="期初结存" align="center"  ><el-table-column label="数量" align="center"   ><template slot-scope="scope"><div>{{ scope.row.preNum }}</div></template></el-table-column><el-table-column label="平均单价" align="center"   ><template slot-scope="scope"><div>{{ scope.row.prePrice }}</div></template></el-table-column><el-table-column label="金额" align="center"   ><template slot-scope="scope"><div>{{ scope.row.preUnitPrice }}</div></template></el-table-column></el-table-column><el-table-column label="本期入库" align="center"  ><el-table-column label="数量" align="center"  ><template slot-scope="scope"><div>{{ scope.row.rkNum }}</div></template></el-table-column><el-table-column label="平均单价" align="center"  ><template slot-scope="scope"><div>{{ scope.row.rkUnitPrice }}</div></template></el-table-column><el-table-column label="金额" align="center"  ><template slot-scope="scope"><div>{{ scope.row.rkPrice }}</div></template></el-table-column></el-table-column><el-table-column label="本期出库" align="center"  ><el-table-column label="数量" align="center"  ><template slot-scope="scope"><div>{{ scope.row.ckNum }}</div></template></el-table-column><el-table-column label="平均单价" align="center"  ><template slot-scope="scope"><div>{{ scope.row.ckUnitPrice }}</div></template></el-table-column><el-table-column label="金额" align="center"  ><template slot-scope="scope"><div>{{ scope.row.ckPrice }}</div></template></el-table-column></el-table-column><el-table-column label="期末结余" align="center"  ><el-table-column label="数量" align="center"  ><template slot-scope="scope"><div>{{ scope.row.postNum }}</div></template></el-table-column><el-table-column label="平均单价" align="center"  ><template slot-scope="scope"><div>{{ scope.row.postPrice }}</div></template></el-table-column><el-table-column label="金额" align="center"  ><template slot-scope="scope"><div>{{ scope.row.postUnitPrice }}</div></template></el-table-column></el-table-column><el-table-column align="center" label="出入库流水" fixed="right"><template slot-scope="scope"><el-button type="text" @click="jumpClick"   size="small">查看</el-button></template></el-table-column></el-table>

主要看这！！！

<el-table :data="sendReceivList"  :header-cell-class-name="addClass"  

 methods: {addClass({ row, rowIndex, column, columnIndex }) {if (column.label == '数量'||column.label == '平均单价'||column.label == '金额') {return "whiteColor";} else {return 'huiColor'}},},<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table__header-wrapper th.whiteColor {background-color: white !important;color: red;
}
::v-deep .el-table__header-wrapper th.huiColor {background-color: #F5F7FA !important;
}</style>