更改 element-ui 标题行的背景颜色

【问题标题】：Change background color of header row for element-ui更改 element-ui 标题行的背景颜色
【发布时间】：2021-03-17 02:54:56
【问题描述】：

我正在使用element-ui 在 Vue 项目中添加包含一些数据的表。我希望仅更改标题行的背景颜色。我怎样才能做到这一点？

我尝试过的事情：

为:row-class-name prop 添加了一个自定义类：

<el-table :row-class-name="headerStyle">

（在方法中）

headerStyle() {
   return 'customClass'
}

在同一.vue文件中的样式标签中：

.el-table .customClass {
/*Custom CSS*/
}

【问题讨论】：

标签： css vue.js element-ui

【解决方案1】：

您可以使用header-cell-style 属性设置表头的background：

<el-table :header-cell-style="{ background: 'blue' }">

demo

或者您可以将样式应用于header-cell-class-name指定的类名：

<el-table header-cell-class-name="my-header">

<style>
.my-header {
  background: blue !important; // !important needed here to override default style
}
</style>

【讨论】：