更新记录

v1.0（2025-10-22）

v1.0 发布版本

平台兼容性

uni-app(4.0)

其他

单元格合并组件

项目概述

从现有项目上拆出来的一个组件,支持单元格的合并及表头、内容、背景等自定义方式去变更样式。使用简单，从数据上就能处理合并逻辑，，使得获取后台数据后，使用更加便捷。

功能特性

• ✅ 使用简单易用
• ✅ 可自定义表头样式
• ✅ 可自定义内容样式
• ✅ 可自定义背景样式
• ✅ 可通过数据变化控制合并
• ✅ 表格列数过多超长后支持滑动

使用方法

1. 在页面内引用components内的组件
2. 在components内引用组件 https://env-00jxu741v52d.normal.cloudstatic.cn/%E5%9B%BE%E5%BA%8A/01.png
3. 在想要使用的页面引用组件 https://env-00jxu741v52d.normal.cloudstatic.cn/%E5%9B%BE%E5%BA%8A/02.png
4. 配置表格、表头等样式columns数据 https://env-00jxu741v52d.normal.cloudstatic.cn/%E5%9B%BE%E5%BA%8A/03.png
5. 处理表格内容数据，并赋值给columns.data this.tableData.data = list; https://env-00jxu741v52d.normal.cloudstatic.cn/%E5%9B%BE%E5%BA%8A/04.png
6. 如需合并需处理表格合并数据，并赋值给columns.merge this.tableData.merge = this.mergeTest; https://env-00jxu741v52d.normal.cloudstatic.cn/%E5%9B%BE%E5%BA%8A/05.png

测试数据

testData: '[{"date":"2025-10-18","spNumber":"0201000011","name":"产品001","price":127.5,"newprice":122.5,"wfqty":40,"sumAmount":"-200","ROW_NUMBER":"1"},{"date":"2025-10-18","spNumber":"0201000011","name":"产品002","price":122.5,"newprice":120,"wfqty":40,"sumAmount":"-100","ROW_NUMBER":"2"}]'

在此献上一个根据关键字time合并的方法，大家可以自己去根据实际业务修改使用（generateMergeConfigAdvanced）

export function generateMergeConfigAdvanced(data) { const merge = []; const timeGroups = {};

// 按time分组，记录每个time的所有行索引
data.forEach((item, index) => {
    if (!timeGroups[item.time]) {
        timeGroups[item.time] = [];
    }
    timeGroups[item.time].push(index);
});

// 为每个分组生成合并配置
Object.values(timeGroups).forEach(group => {
    if (group.length > 1) {
        // 检查索引是否连续
        const isContinuous = group.every((index, i) => 
            i === 0 || index === group[i - 1] + 1
        );

        if (isContinuous) {
            merge.push({
                row: group[0],
                rowspan: group.length
            });
        } else {
            // 如果不连续，为每个连续段分别创建合并
            let start = group[0];
            let count = 1;

            for (let i = 1; i <= group.length; i++) {
                if (i === group.length || group[i] !== group[i - 1] + 1) {
                    if (count > 1) {
                        merge.push({
                            row: start,
                            rowspan: count
                        });
                    }
                    if (i < group.length) {
                        start = group[i];
                        count = 1;
                    }
                } else {
                    count++;
                }
            }
        }
    }
});

// 按row排序
return merge.sort((a, b) => a.row - b.row);

}