需求：给合并后的单元格表头设置背景颜色

需求：给合并后的单元格表头设置背景颜色

效果：

第二列中又划分了三列，想要修改其背景颜色样式

1. 表格

 <el-table
          :data="tableData"
          border
          class="reportClass"
          :header-cell-class-name="getCellClassName"
          :header-cell-style="headerCellStyle"
          max-height="calc(100vh - 220px)"
        >
        
            <el-table-column
            label="Pub"
            prop=""
            align="center"
            :header-cell-style="{ backgroundColor: '#f0f2f5' }"
          >
            <el-table-column
              label="Target"
              prop="pubTarget"
              width="90"
              sortable
            >
            </el-table-column>
            <el-table-column label="" prop="pubCurrent" width="130" sortable>
              <template #header>
                <span>Current<br />Completion</span></template
              >
            </el-table-column>

            <el-table-column
              align="center"
              label="Progress"
              prop="pubProgress"
              width="150"
              sortable
            >
              <template #default="scope">
                <!-- <div class="progress-bar">
                  <div
                    v-for="(item, index) in scope.row.pubProgress"
                    :key="index"
                    class="progress-segment"
                    :style="{
                      backgroundColor:
                        item == 0
                          ? '#bdc3c7'
                          : item >= scope.row.pubTarget
                          ? '#52c41a'
                          : '#e74c3c',
                    }"
                    :title="getTitle(item, index + 1)"
                  ></div>
                </div> -->
                <div style="display: flex; flex-direction: column; width: 100%">
                  <el-progress
                    :percentage="scope.row.pubProgress.replace('%', '') || 0"
                  />
                  <div class="progress-text">
                    {{ scope.row.pubProgress }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
</el-table>

2. 自定义颜色

// 自定义每个表头的背景颜色
const headerCellStyle = ({ column }) => {
  const label = column.label;
  const prop = column.property;

  if (
    label === "Pub" ||   // 第一行的label
    prop === "pubCurrent" ||   // 第二行的第一列prop
    prop === "pubTarget" ||   // 第二行的第二列prop
    prop === "pubProgress"    // 第二行的第三列prop
  ) {
    return {
      backgroundColor: "#daafaf",
      color: "#333333",
    };
  }



  // 默认
  return {
    backgroundColor: "",
    color: "#333333",
  };
};