当前位置: 首页 > news >正文

动态合并任意连续相同行

需求:支持动态合并任意连续相同行
解决
(1)动态合并行数
①通过 while 循环持续检查后续行,直到发现不同值或数据结尾;
②示例:连续3行相同返回 rowspan:3,后续2行自动隐藏;
(2)智能起始行判断

// 满足以下条件视为合并起始行:
rowIndex === 0 || // 首行
row.engineerSupportType !== previousRow.engineerSupportType // 与前一行不同
const objectSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
    }: SpanMethodProps) => {
        if (columnIndex === 0) { // 仅处理第一列
            // 判断是否为连续相同字段的起始行
            if (rowIndex === 0 || 
                row.engineerSupportType !== ruleData.data[rowIndex - 1].engineerSupportType) {
                
                // 计算连续相同行数
                let mergeCount = 1;
                let currentIndex = rowIndex;
                
                // 循环检查后续所有行
                while (
                    currentIndex + 1 < ruleData.data.length &&
                    ruleData.data[currentIndex].engineerSupportType === 
                    ruleData.data[currentIndex + 1].engineerSupportType
                ) {
                    mergeCount++;
                    currentIndex++;
                }

                return {
                    rowspan: mergeCount,
                    colspan: 1
                };
            } else {
                // 非起始行隐藏
                return {
                    rowspan: 0,
                    colspan: 0
                };
            }
        }
    };

测试:

// 测试数据
const data = [
    { engineerSupportType: 'A' }, // 行0(合并3行)
    { engineerSupportType: 'A' }, // 行1(隐藏)
    { engineerSupportType: 'A' }, // 行2(隐藏)
    { engineerSupportType: 'B' }, // 行3(合并2行)
    { engineerSupportType: 'B' }, // 行4(隐藏)
    { engineerSupportType: 'C' }  // 行5(合并1行)
];

// 输出结果:
行0: rowspan:3
行1: rowspan:0
行2: rowspan:0 
行3: rowspan:2
行4: rowspan:0
行5: rowspan:1

注意事项
(1)数据必须排序
合并字段需要预先排序保证相同值连续:

// 在数据加载时排序
ruleData.data.sort((a, b) => 
    a.engineerSupportType.localeCompare(b.engineerSupportType)
);

(2)大数据量优化
万级数据建议使用预处理方案(参考之前回答):

// 预处理生成合并参数数组
const spanArr = ref<number[]>([]);

// 数据变化时重新计算
watch(() => ruleData.data, generateSpanArr, { deep: true });

相关文章:

  • Linux 创建用户和用户组,设置主目录
  • vue中实现元素在界面中自由拖动
  • Flink介绍与安装
  • 4.(vue3.x+vite)接入echarts
  • 前端工程化开篇
  • Redis 如何保证数据一致性:从原理到实践的全面解析
  • 【Flutter入门】1. 从零开始的flutter跨平台开发之旅(概述、环境搭建、第一个Flutter应用)
  • 基于微信小程序的仓储管理系统+论文源码调试
  • Linux程序性能分析
  • 蓝之洋科技以AI智能制造引领变革,推动移动电源产业迈向高端智能化!
  • vue创建子组件步骤及注意事项
  • 安装samba脚本
  • 04_JavaScript循环结构
  • kafka基础
  • 【蓝桥杯—单片机】数模电路专项 | 真题整理、解析与拓展 | 省赛题 (更新ing...)
  • 【DeepSeek大语言模型】基于DeepSeek和Python的高光谱遥感从数据到智能决策全流程实现与城市、植被、水体、地质、土壤五维一体应用
  • Docker Compose介绍
  • JavaPro
  • 【Java】readUnsignedShort()与readShort()
  • VS Code连接远程服务遇到的问题
  • 让中小学生体验不同职业,上海中高职院校提供超5万个体验名额
  • 荷兰外交大臣费尔德坎普将访华
  • 小米法务部:犯罪团伙操纵近万账号诋毁小米,该起黑公关案告破
  • 上海公办小学验证今起开始,下周一和周二分区进行民办摇号
  • 小米汽车回应部分SU7前保险杠形变
  • 陕西省市监局通报5批次不合格食品,涉添加剂超标、微生物污染等问题