如何修改Element UI表格单个列表头的背景色（Vue.js环境）

开发者阿泽

2026-7-4

搞定Element UI el-table指定列头背景色+动态修改的方法

方案一：用el-table的`header-cell-class-name`加自定义类

el-table本身提供了header-cell-class-name属性（支持动态绑定），能给指定列的表头单元格单独加类，步骤很简单：

给el-table绑定这个属性：

<el-table
  :data="tableData"
  :header-cell-class-name="setHeaderClass"
>
  <el-table-column prop="columnName" label="Column Name" />
  <el-table-column prop="otherColumn" label="Other Column" />
</el-table>

写个方法判断目标列，返回类名：

methods: {
  setHeaderClass({ column }) {
    // 按列的prop或者label来匹配都行，这里用prop举例
    return column.prop === 'columnName' ? 'custom-column-header' : '';
  }
}

加CSS样式（如果是scoped样式，记得加::v-deep穿透）：

/* scoped模式下 */
::v-deep .custom-column-header {
  background-color: #000;
}

/* 非scoped直接写 */
.custom-column-header {
  background-color: #000;
}

方案二：动态修改背景色（直接绑定变量）

如果要随时切换背景色，用header-cell-style更直接，不用写类：

给el-table绑定header-cell-style：

<el-table
  :data="tableData"
  :header-cell-style="getHeaderStyle"
>
  <el-table-column prop="columnName" label="Column Name" />
  <el-table-column prop="otherColumn" label="Other Column" />
</el-table>

定义变量+判断方法：

data() {
  return {
    targetHeaderBg: '#000', // 改这个变量就能实时变背景色
    tableData: [...]
  };
},
methods: {
  getHeaderStyle({ column }) {
    if (column.prop === 'columnName') {
      return { backgroundColor: this.targetHeaderBg };
    }
    return {};
  }
}