如何动态修改按楼层分组表格的groupHeader背景颜色？

核心思路 #

rowFormatter 仅作用于数据行，分组表头需要单独配置对应的格式化钩子或方法，核心是先预计算每个分组的开窗状态，再绑定到分组表头的样式上。

具体实现步骤 #

• 预计算分组状态：在渲染表格前，遍历数据按楼层分组，标记每个分组是否存在打开的窗户（比如新增一个hasOpenWindow字段）。
• 配置分组表头格式化器：找到表格组件中对应分组表头的格式化配置项（不同库命名不同，比如groupHeaderFormatter、headerGroupRenderer等），在该方法中根据预计算的hasOpenWindow值设置背景色。

示例代码（以常见表格组件为例） #

假设你用的是支持分组表头自定义的表格库，代码大致如下：

// 1. 预计算分组状态
const groupedData = yourRawData.reduce((acc, item) => {
  const floor = item.floor;
  if (!acc[floor]) {
    acc[floor] = {
      items: [],
      hasOpenWindow: false
    };
  }
  acc[floor].items.push(item);
  if (item.windowStatus === 'open') { // 假设windowStatus是开窗状态字段
    acc[floor].hasOpenWindow = true;
  }
  return acc;
}, {});

// 2. 配置分组表头格式化器
const tableOptions = {
  // ...其他配置
  groupHeaderFormatter: (group) => {
    const bgColor = group.hasOpenWindow ? 'red' : 'green';
    return `<div style="background-color: ${bgColor}; padding: 8px;">${group.key}</div>`;
  },
  // 你的rowFormatter配置保持不变
  rowFormatter: (row) => {
    // 原有数据行背景色逻辑
  }
};

注意事项 #

• 不同表格组件的分组表头配置项名称可能不同，比如ag-Grid用getRowStyle结合分组判断，或者自定义headerGroupComponent；如果是原生表格，需要手动生成分组表头DOM并绑定样式。
• 确保预计算的分组状态和表格渲染时的分组数据同步，避免状态不一致。

内容的提问来源于stack exchange，提问作者Reiner