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

Posted 2023-02-22

【中文标题】更改 element-ui 标题行的背景颜色

【英文标题】：Change background color of header row for 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*/

【参考方案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>