<h3>row-style header-row-style 不能改背景色h3>
<h3>cell-style header-cell-style能改背景色h3>
:header-row-style="headerRowState"
:header-cell-style="headerCellState"
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
<div>测试2================div>
<h3>header-row-class-name 不能改背景色h3>
<h3>header-cell-class-name能改背景色h3>
header-row-class-name="myHeaderClass"
header-cell-class-name="myHeaderCellClass"
row-class-name="myRowClass"
cell-class-name="myCellClass"
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
import { getCurrentInstance, onMounted, reactive, ref, inject } from "vue";
const install = getCurrentInstance();
const tableData = reactive
([]);const allDableData = reactive
([]);const pageSize4 = ref(10);
const currentPage4 = ref(1);
for (let i = 0; i < 100; i++) {
address: "No. 189, Grove St, Los Angeles",
tableData.push(...allDableData.slice(currentPage4.value - 1, pageSize4.value));
function rowState({ row }) {
//console.log(row.color_index)
switch (row.color_index % 4) {
backgroundColor: "purple",
function cellState(row) {
// row, column, rowIndex, columnIndex
//console.log(row.rowIndex,row.columnIndex)
let style = { backgroundColor: "rgb(16, 95, 95)", color: "blueviolet" };
if (row.columnIndex == 1) {
function headerRowState(item) {
// row, column, rowIndex, columnIndex
//console.log("不能改背景,需要利用header-cell-style")
return { backgroundColor: "rgb(160, 50, 90)", color: "blueviolet" };
function headerCellState(item) {
return { backgroundColor: "rgb(160, 90, 50)", color: "blueviolet" };
background-color: rgb(16, 95, 95) !important;
background-color: rgb(16, 95, 95) !important;
background-color: rgb(16, 95, 95);
color: rgb(203, 184, 221);
background-color: rgb(16, 95, 95);
::v-deep .el-table__expanded-cell {
/* background-color: transparent !important;
background-color: rgb(16, 95, 95);
background-color: rgb(16, 95, 95) !important;
background-color: rgb(16, 95, 95) !important;
background: rgb(16, 95, 95);
background-size: 100% 100% !important;
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: rgb(66, 11, 11) !important;
/* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */