Element Plus 表格表头颜色自定义教程

在 Element Plus 中，可以通过自定义样式来修改表格表头的颜色。

首先，在 HTML 的 <style> 标签或者外部的 CSS 文件中定义一个类，用于修改表头的颜色，例如：

.custom-header {
  background-color: red;
  color: white;
}

然后，在使用 Element Plus 的表格组件时，通过 header-cell-class-name 属性将定义的类应用到表头单元格上，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" header-cell-class-name="custom-header"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

这样，表格的姓名列的表头就会使用自定义的背景颜色和文字颜色。

需要注意的是，header-cell-class-name 属性可以接收一个字符串或者一个返回字符串的函数，如果需要根据条件动态修改表头的样式，可以使用函数的方式来设置类名。