Element ui plush中表格表头颜色

一、 Element ui plush中表格表头各列变色

需求是表格中的表头要色块做区分，有些列是一个颜色，另一些列又是另一个颜色

<el-table
      class="custom-line"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="handleHeaderStyle" // 表头样式改变方法
      :cell-style="handleCellStyle" // 数据样式改变方法
    >
    </el-table>
// 颜色配置表（通过prop关联）
const colorConfig = {
  // 独立列
  序号: {
    color: "#dcebff"
  },
  申报编号: {
    color: "#dcebff"
  },
  课题名称: {
    color: "#dcebff"
  },
  当前专家评审结果: { //有二级表头的
    color: "#dcebff",
    children: ["isPassYsxt", "approval", "isRecProvince"] // 子列prop
  }
};
// 判断表头样式处理
const handleHeaderStyle = ({ column }) => {
  const prop = column.property;
  const label = column.label;

  // 查找颜色配置
  const config = Object.entries(colorConfig).find(([key, cfg]) => {
    return cfg.children?.includes(prop) || key === label;
  });
  return { background: config ? config[1].color : "" };
};

// 表头如果是动态的，循环写入配置颜色，这里是二级标题写入配置。
columnGroupList.value.map(item => {
      colorConfig["集中评审"].children.push(item.value);
 });

二、表格中的数据列区域色块的添加。

下方配置和表头的配置相同。

// 数据列样式处理
const handleCellStyle = ({ column }) => {
  const prop = column.property;
  // 查找颜色配置
  const config = Object.entries(colorConfig).find(([key, cfg]) => {
    return cfg.children?.includes(prop) || key === prop;
  });

  return { background: config ? config[1].color : "" };
};