在Element UI中，可以通过以下方式给表格头部行添加背景颜色：
- 使用内联样式直接在模板中添加
el-table-column元素。 - 使用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确保覆盖任何可能的内联样式。