How to change the background color of only one column header of an Element UI table?

Question

I want to change the background color of the column header of the el-table but it seems that you can only change the background for all the column headers of the table. Is there a way to do this? Also, I need to change the background dynamically. I am using vue.js.

tried to do this but header-class-name is not an attribute of el-table-column so it will not work.

<el-table-column prop="columnName" label="Column Name" :header-class-name="customHeaderClass"></el-table-column>

css:

.custom-column-header {
  background-color: #000000;
}

Answer 1

I cant see your function customHeaderClass,I will define it like below

   function customHeaderClass({
      row,
      rowIndex
    }) {
      if (row.status == 1) return 'class1'
      if (row.status == 2) return 'class2'
      if (row.status == 3) return 'class3'
      return 'defaultClass'
    }


    .class1 {
      background: ...

    }
    .class2 {
      background: ...

    }
    .class3 {
      background: ...
    }
    .defaultClass {
      background: ...
    }

Answer 2

The following code maybe can help you.

<el-table-column
    label='address' prop='address'  align='center'
  >
    <template #header="{ column }">
      <div :style="{ background: '#f2f2f2', color: 'blue' }">
        {{ column.label }}
      </div>
    </template>
  </el-table-column>

( I'm learning English now.I would appreciate it if you can point out my expresssion problem )