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">
<el-button type="text" size="mini">图档上传el-button>
<el-button type="text" size="mini">委外el-button>
<el-button type="text" size="mini">派工作业el-button>
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';
}
},
遇到的坑
- 可以看到通过这两种方式都能够获取到column，一个添加的是class一个是直接的样式
- 如果你试着想通过elements找到标签上的class去设置样式，你会发现样式设置上去了，但是你点击另一个的表格，再回来就会发现class已经变了
- 千万不要使用column的id去做判断，这个id是会改变的
结语
本文就分享到这，希望对你有帮助
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知