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

el-table 自定义表头颜色

article 2025/1/9 6:32:38

第一种方法：计算属性

<template>
         <div>
            <el-table
              :data="formData.detail"
              border stripe
              highlight-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 stripe
              highlight-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>

效果：