如何更改表头的背景颜色

Element Plus 提供了自定义表头样式的选项。要修改 <el-table> 组件中表头的背景颜色，请按照以下步骤进行操作：

1. 引入 Element Plus 组件库。

要使用 Element Plus 的组件，你需要先正确引入 Element Plus 组件库。你可以在项目中引入 CSS 文件和注册所需的组件。具体的安装和配置方法，请参考 Element Plus 的官方文档。

2. 定义自定义的表头样式。

在你的样式文件（比如，App.vue 中的 <style> 部分），定义一个类或选择器来修改表头的样式。使用 CSS 的 background-color 属性来设置所需的背景颜色。例如：

/* 通过类选择器来修改表头的背景颜色 */
.custom-header {
  background-color: red;
}

3. 将自定义样式应用到表头。

将自定义的样式应用到 <el-table> 组件的表头部分。在 <el-table-column> 标签中使用 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="年龄" :header-cell-class-name="'custom-header'"></el-table-column>
  <el-table-column prop="gender" label="性别" :header-cell-class-name="'custom-header'"></el-table-column>
</el-table>

在上述代码中，我们使用 header-cell-class-name 属性将 custom-header 类应用于每个 <el-table-column> 的表头单元格，以实现表头背景颜色的修改。

请确保将 CSS 类名用单引号包含起来，以在 Vue 模板中传递一个字符串值。

这样，你就可以通过这种方式，使用 Element Plus 修改 <el-table> 组件中表头的背景颜色。根据需要，你可以调整自定义的样式类和样式属性来实现其他样式效果。

  <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" :header-cell-style="{ background: '#f4f6f8', color: '#000000' }">

其实在 el-table 加上这一行就可以了

:header-cell-style="{ background: '#f4f6f8', color: '#000000' }"