<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'};
}
}
}