element-ui 给表格头部行添加背景颜色

在Element UI中，可以通过以下方式给表格头部行添加背景颜色：

1. 使用内联样式直接在模板中添加el-table-column元素。
2. 使用CSS类来覆盖默认样式。

使用内联样式

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      header-cell-style="background-color: #f5f7fa;">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象
      ]
    }
  }
}
</script>

使用CSS类

首先，在你的组件的<style>标签中或者单独的CSS文件中定义一个CSS类：

.custom-header-bg {
  background-color: #f5f7fa !important;
}

然后，在el-table-column元素上应用这个类：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      header-cell-class-name="custom-header-bg">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象
      ]
    }
  }
}
</script>

在这个例子中，我们使用了header-cell-class-name属性来应用CSS类，该类将覆盖默认的表头背景颜色。使用!important确保覆盖任何可能的内联样式。