el-table改变表头的颜色

### 修改 Element UI `el-table` 表头的颜色

为了自定义 `el-table` 的表头样式，可以利用 `:header-cell-style` 属性来动态设定表头单元格的样式。此方法允许通过绑定一个对象给该属性从而指定背景色、字体大小以及文字颜色等CSS属性。

<template>
  <div id="app">
    <!-- 使用 header-cell-style 绑定内联样式 -->
    <el-table :data="tableData" :header-cell-style="headerCellStyle">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, Los Angeles" },
        { date: "2016-05-02", name: "John", address: "New York No. 1 Lake Park" }
      ],
      // 定义表头样式的函数或直接返回样式对象
      headerCellStyle: {
        backgroundColor: "#eef1f6",
        color: "red"
      }
    };
  }
};
</script>

上述代码展示了如何设置固定的表头背景色和文字颜色[^3]。如果希望更灵活地控制样式，则可以通过提供一个返回样式的函数实现：

// 在 script 部分中定义计算属性或者方法
methods: {
  getHeaderStyle({ row, column, rowIndex, columnIndex }) {
    let style = {};
    if (rowIndex === 0) { // 只针对表头应用样式
      style.backgroundColor = "#eef1f6";
      style.color = "blue"; // 改变这里改变文字颜色
    }
    return style;
  }
}

然后将这个方法作为`:header-cell-style` 的值传递进去:

<!-- 将获取样式的逻辑移到 methods 或 computed 中处理 -->
<el-table :data="tableData" :header-cell-style="getHeaderStyle">
...
</el-table>

这样就可以根据不同条件调整表头的显示效果了[^2]。