DevExpress React Grid指定条件合并行技术求助

实现思路 #

通过自定义单元格渲染组件，判断行数据是否符合Region=America且Sector=Banking的条件，统计符合条件的总行数后，为第一个符合条件的单元格设置rowspan属性，其余符合条件的单元格直接隐藏，从而实现行合并效果。

代码实现 #

1. 自定义合并单元格组件

const MergedCell = ({ row, column, visibleRows }) => {
  // 判断当前行是否满足合并条件
  const isEligibleForMerge = row.Region === 'America' && row.Sector === 'Banking';
  if (!isEligibleForMerge) {
    return <TableCell>{row[column.name]}</TableCell>;
  }

  // 筛选所有符合条件的行
  const mergedRows = visibleRows.filter(item => item.Region === 'America' && item.Sector === 'Banking');
  const currentRowIndex = visibleRows.indexOf(row);
  const firstMergedRowIndex = visibleRows.indexOf(mergedRows[0]);

  // 仅第一个符合条件的行渲染单元格并设置rowspan，其余行隐藏单元格
  if (currentRowIndex === firstMergedRowIndex) {
    return <TableCell rowSpan={mergedRows.length}>{row[column.name]}</TableCell>;
  }
  return null;
};

2. 配置Grid组件，应用自定义单元格

<Paper>
  <Grid rows={rows} columns={columns}>
    <Table />
    <TableHeaderRow />
    {/* 为所有列绑定自定义合并单元格组件 */}
    {columns.map(column => (
      <TableColumn
        key={column.name}
        name={column.name}
        cellComponent={MergedCell}
      />
    ))}
  </Grid>
</Paper>

注意事项 #

• 自定义组件会接收visibleRows、row、column等Grid传递的属性，确保这些参数可用
• 如果仅需要合并特定列，只需为目标列单独配置TableColumn即可，无需遍历所有列
• 若表格存在排序、筛选操作，visibleRows会自动更新，合并逻辑会同步适配最新的可见行数据

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