Skip to content

单元格合并 ^0.8.0

通过 StkTableColumns['mergeCells'] 函数指定需要合并的单元格。

ts
function mergeCells(data: { 
    row: any,
    col: StkTableColumn<any>,
    rowIndex: number,
    colIndex: number
}): {
    /** 列合并数量 */
    colspan:number, 
    /** 行合并数量 */
    rowspan:number
}

返回 { colspan: number, rowspan: number } 表示合并单元格的数量,colspan 表示列合并数量,rowspan 表示行合并数量。

列合并

loading

列合并虚拟列表 ^1.1.0

简单合并

loading

代码中,定义了 mergeCells 函数,将一行中的colspan字段作为合并数量。

ts
mergeCells: ({ row }) => {
    return row.colspan ? { colspan: row.colspan } : void 0;
}

TIP

横向虚拟列表模式下,合并单元格(colspan)的锚点列滚出可视区域时,会自动扩展可视列范围,保证合并单元格完整渲染。

不规律合并

loading

超长 colspan

colspan 非常大(如合并 150 列)时,横向虚拟滚动依然可以正确工作:合并区域与可视区相交期间,可视列范围会扩展到整个合并区域,保证合并单元格完整渲染;滚出合并区域后恢复正常渲染。

loading

行合并

loading

TIP

如果表格数据有变化,则会重新调用 mergeCells 函数计算。

注意:若是原地修改行字段(行对象引用不变,未重新传入 dataSource)且 mergeCells 依赖这些字段,修改后需调用实例方法 clearMergeCellsCache 手动失效合并结果缓存。

行合并虚拟列表 ^0.8.4

简单合并

loading

代码中,定义了 mergeCells 函数,将一行中的rowspan字段作为合并数量。

ts
function mergeCells({ row, col }: { row: any, col: StkTableColumn<any> }) {
    if (!row.rowspan) return;
    return { rowspan: row.rowspan[col.dataIndex] || 1 };
}

这样就可以在数据中直接定义合并数量,而不需要在 mergeCells 函数中判断。

ts
{
    id: '1-1-1', continent: 'Asia', country: 'China', province: 'Beijing',
    rowspan: { continent: 12, country: 6, }
}

mergeCells性能

虚拟列表模式下,会遍历所有的合并单元格(mergeCells函数),对性能有一定影响。

不规律合并

loading

超长 rowspan

rowspan 非常大(如 1000~2000 行)时,虚拟列表仍会渲染该合并单元格覆盖的所有行,可能导致性能下降。以下示例展示了这种极端场景。

loading

性能优化

如果有很大的rowspan或colspan, 可以考虑用 普通单元格 + 隐藏border 的方式,来模拟合并单元格的效果。

行列合并 ^1.1.0

行合并(rowspan)与列合并(colspan)可以同时使用,并且兼容 virtualvirtual-x 虚拟滚动。

loading

实时合并单元格

如需通过用户交互(区域选取 + 右键菜单)动态合并/拆分单元格,请参考实时合并单元格

根据 MIT 许可证发布