【Vue】表格实现表头多彩

最近在做统计的需求，一个台账有多个模块的数据，表头需要根据颜色区分

效果

上代码

表格添加 :header-cell-style

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

编写实现 headerCellStyle

const DDEBF7 = [
  这里是表头1 的属性（prop对应字段） 比如 userName
];
const BDD7EE = [
  这里是表头2 的属性（prop对应字段） 比如 userAge
];
....表头n

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  // 根据属性设置不同颜色
  if (DDEBF7.includes(column.property)) {
    return { background: '#b8cce4 !important', color: '000000' };
  } else if (BDD7EE.includes(column.property)) {
    return { background: '#dce6f1 !important', color: '#000000' };
  }
};