当前位置：首页 > news >正文

el-table 自定义表头颜色

news 2025/7/17 10:19:35

第一种方法：计算属性

<template><div><el-table:data="formData.detail"border stripehighlight-current-row:cell-style="{ 'text-align': 'center' }":header-cell-style="headerCellStyle"><el-table-column fixed prop="id" label="序号" width="80px" type="index"/><el-table-column prop="partCode" label="编码" width="120px"/><el-table-column prop="name" label="名称"/><el-table-column prop="spec" label="规格"/><el-table-column prop="partStuff" label="材质"/><el-table-column prop="partUnit" label="单位"/><el-table-column prop="batchNumber" label="批次号" /><el-table-column prop="number" label="数量" /></el-table></div></template><script>const formData = ref([])const headerCellStyle = ({ column, $index }) =>{let style = {background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'};if (column.property == 'batchNumber' || column.property == 'number' ) {style.background = '#e7c265';}return style;
}</script>

第二种方法：深度样式

<template><div><el-table:data="formData.detail"border stripehighlight-current-row:cell-style="{ 'text-align': 'center' }":header-cell-style="{background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'}"><el-table-column fixed prop="id" label="序号" width="80px" type="index"/><el-table-column prop="partCode" label="编码" width="120px"/><el-table-column prop="name" label="名称"/><el-table-column prop="spec" label="规格"/><el-table-column prop="partStuff" label="材质"/><el-table-column prop="partUnit" label="单位"/><el-table-column prop="batchNumber" label="批次号" :header-cell-class-name="'custom-header-class'"/><el-table-column prop="number" label="数量" /></el-table></div></template><script>const formData = ref([])const headerCellStyle = ({ column, $index }) =>{let style = {background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'};if (column.property == 'batchNumber' || column.property == 'number' ) {style.background = '#e7c265';}return style;
}</script><style scoped>/* 使用 :deep() 确保样式能穿透到子组件 */.el-table-style :deep(.custom-header-class) {background: #a1884b !important; /* 使用 !important 提高优先级 */color: #1e1f22;height: 35px;text-align: center;}
</style>

效果：