vue3 el-table表头样式（背景颜色，字体颜色）

• 如果不加!important，可能导致样式不生效

---

• 1、统一更改表头样式

  <el-table :header-cell-style="{background:'pink !important',color:'red !important'}">

---

• 2、自定义各个列表头样式

  <el-table :header-cell-style="tableHeaderCellStyle">

// 修改 table header cell的背景色
const tableHeaderCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0) {   //第一行（表头）
    //第一列和第二列，背景颜色改为pink
    if (columnIndex== 1 || columnIndex== 2) {
      return  { background: 'pink !important' }
    }
    //第五列，背景颜色改为blue，字体颜色改为black
    else if (columnIndex== 5) {
      return  { background: 'blue !important', color: 'black !important'}
    }
    //第5-21列，背景颜色改为blue
    else if (columnIndex >= 5 && columnIndex <= 21) {
      return  { background: 'blue !important',}
    }
  }
}