为 element-ui 更改 header 行的背景颜色

Question

我正在使用 element-ui 在 Vue 项目中添加带有一些数据的 table。我只想更改 header 行的背景颜色。我怎样才能做到这一点？

我尝试过的事情：

向 :row-class-name 添加了自定义 class 属性：

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

（在方法中）

headerStyle() {
   return 'customClass'
}

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

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

Answer 1

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

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

demo

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

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

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

为 element-ui 更改 header 行的背景颜色

Change background color of header row for element-ui

css

vue.js

element-ui