Vue.js表格数据合并实战：Element Plus动态合并单元格

1. 项目概述

在Vue.js项目开发中，表格数据展示是最常见的需求之一。当遇到大量重复数据时，合并相同内容的单元格不仅能提升表格的可读性，还能让数据呈现更加专业。Element Plus作为Vue 3的组件库，其Table组件提供了强大的数据展示能力，但动态合并相同数据列的功能需要开发者自行实现。

最近我在一个电商后台管理系统中遇到了这样的需求：需要根据交易号(deal_code)合并表格中的相同数据列。具体来说，当多条数据的交易号相同时，需要进一步检查这些数据中其他列的值是否相同，如果相同则进行合并展示。这种需求在订单管理、物流跟踪等场景中非常常见。

2. 核心需求解析

2.1 业务场景分析

在实际业务中，一个交易号可能对应多条记录（比如同一笔订单中的不同商品）。前端展示时需要将这些记录合并显示，避免重复信息造成的视觉干扰。但合并需要满足以下条件：

1. 只有交易号相同的记录才考虑合并
2. 在交易号相同的前提下，其他列的值也相同的才进行合并
3. 合并后只显示第一个单元格，其他相同单元格隐藏

2.2 技术难点

实现这个功能有几个关键点需要注意：

1. 数据预处理：需要在渲染前对原始数据进行处理，标记出哪些单元格需要合并
2. 动态合并策略：Element Plus的span-method属性需要返回合并的行列数
3. 性能考虑：对于大数据量的表格，合并算法需要高效，避免影响渲染性能

3. 实现方案设计

3.1 整体思路

我的实现方案分为三个主要步骤：

1. 数据分组：首先按照交易号对数据进行分组
2. 列值比对：在每个分组内，比较各列的值是否相同
3. 合并标记：为需要合并的单元格添加合并标记(rowspan)，为被合并的单元格标记为隐藏(rowspan=0)

3.2 关键算法设计

核心算法流程图如下：

1. 遍历数据，以交易号为键建立哈希表
2. 对每个交易号分组：
   • 记录第一个出现的位置
   • 向后查找相同交易号的记录
   • 比较这两条记录的各列值
   • 如果值相同，则增加合并行数，并标记后续相同单元格为隐藏
3. 将处理后的数据返回给Table组件

4. 代码实现详解

4.1 基础表格配置

首先，我们配置基本的Element Plus表格：

html复制<el-table
  :data="processedTableData"
  :span-method="handleSpanMethod"
  border
  style="width: 100%">
  <el-table-column
    prop="deal_code"
    label="交易号"
    width="180">
  </el-table-column>
  <!-- 其他列配置 -->
</el-table>

4.2 数据处理函数

核心的数据处理函数如下：

javascript复制function processTableData(rawData) {
  // 深拷贝原始数据避免污染
  const data = JSON.parse(JSON.stringify(rawData));
  const mergeConfig = {};
  
  // 第一遍遍历：建立交易号到行索引的映射
  data.forEach((row, index) => {
    const dealCode = row.deal_code;
    if (!mergeConfig[dealCode]) {
      mergeConfig[dealCode] = [];
    }
    mergeConfig[dealCode].push(index);
  });
  
  // 第二遍遍历：处理每个交易号分组
  Object.values(mergeConfig).forEach(group => {
    if (group.length > 1) {
      // 从第一个元素开始比较
      for (let i = 0; i < group.length - 1; i++) {
        const currentIdx = group[i];
        const nextIdx = group[i + 1];
        
        // 比较当前行和下一行的各列值
        for (const key in data[currentIdx]) {
          if (key !== 'deal_code' && data[currentIdx][key] === data[nextIdx][key]) {
            // 初始化合并配置
            if (!data[currentIdx]._span) {
              data[currentIdx]._span = {};
            }
            if (!data[nextIdx]._span) {
              data[nextIdx]._span = {};
            }
            
            // 设置合并行数
            data[currentIdx]._span[key] = 
              (data[currentIdx]._span[key]?.rowspan || 1) + 1;
              
            // 标记被合并的单元格
            data[nextIdx]._span[key] = { rowspan: 0, colspan: 0 };
          }
        }
      }
    }
  });
  
  return data;
}

4.3 合并单元格方法

实现Element Plus要求的span-method方法：

javascript复制function handleSpanMethod({ row, column }) {
  if (row._span && row._span[column.property]) {
    return row._span[column.property];
  }
  return { rowspan: 1, colspan: 1 };
}

5. 高级功能扩展

5.1 动态合并配置

为了使组件更灵活，我们可以支持动态配置合并条件：

javascript复制props: {
  mergeOptions: {
    type: Object,
    default: () => ({
      mergeKey: 'deal_code', // 按哪个字段分组
      mergeColumns: ['channel_code', 'factory_code'] // 哪些列需要合并
    })
  }
}

然后修改处理函数，只检查配置的列：

javascript复制// 在比较列值时增加判断
if (this.mergeOptions.mergeColumns.includes(key) && 
    data[currentIdx][key] === data[nextIdx][key]) {
  // 处理合并逻辑
}

5.2 性能优化

对于大数据量表格，可以采用以下优化策略：

1. 分页处理：只在当前页内查找合并项
2. 虚拟滚动：配合el-table的虚拟滚动功能
3. Web Worker：将数据处理放在Worker线程中

javascript复制// 使用Web Worker处理大数据量
const worker = new Worker('tableMergeWorker.js');
worker.postMessage({ data: rawData, options: this.mergeOptions });
worker.onmessage = (e) => {
  this.processedTableData = e.data;
};

6. 常见问题与解决方案

6.1 合并后边框显示异常

问题描述：合并单元格后，边框可能显示不完整或重叠。

解决方案：

1. 确保el-table设置了border属性
2. 添加自定义CSS修复边框：

css复制.el-table--border .el-table__cell {
  border-right: 1px solid var(--el-table-border-color);
}

6.2 动态更新数据后合并失效

问题描述：当表格数据动态更新后，之前的合并状态丢失。

解决方案：

1. 使用watch深度监听数据变化
2. 数据更新后重新执行合并逻辑

javascript复制watch: {
  tableData: {
    handler(newVal) {
      this.processedTableData = this.processTableData(newVal);
    },
    deep: true
  }
}

6.3 大数据量处理性能问题

问题描述：当数据量很大时(如1000+行)，合并处理耗时较长。

解决方案：

1. 实现分块处理，使用setTimeout分割处理任务
2. 添加加载状态提示

javascript复制async function chunkProcess(data, chunkSize = 100) {
  const result = [];
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    result.push(...processChunk(chunk));
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  return result;
}

7. 最佳实践与经验分享

7.1 代码组织建议

在实际项目中，我建议将表格合并逻辑封装成独立组件或Composable函数：

javascript复制// useTableMerge.js
import { ref, watch } from 'vue';

export function useTableMerge(options) {
  const processedData = ref([]);
  
  function mergeData(rawData) {
    // 合并逻辑实现
  }
  
  return {
    processedData,
    mergeData
  };
}

7.2 测试策略

为确保合并逻辑正确，应编写全面的测试用例：

javascript复制describe('表格合并逻辑', () => {
  it('应该正确合并相同交易号的相同列', () => {
    const testData = [
      { deal_code: '001', name: 'A', value: 1 },
      { deal_code: '001', name: 'A', value: 2 },
      { deal_code: '002', name: 'B', value: 3 }
    ];
    
    const result = processTableData(testData);
    expect(result[0]._span.name.rowspan).toBe(2);
    expect(result[1]._span.name.rowspan).toBe(0);
  });
});

7.3 性能监控

添加性能监控代码，确保处理时间在合理范围内：

javascript复制function processTableData(data) {
  const start = performance.now();
  // ...处理逻辑
  const end = performance.now();
  console.log(`数据处理耗时: ${(end - start).toFixed(2)}ms`);
  return result;
}

8. 完整实现示例

下面是一个完整的实现示例，包含了所有核心功能：

html复制<template>
  <div>
    <el-table
      :data="processedData"
      :span-method="handleSpanMethod"
      border
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  props: {
    rawData: Array,
    mergeOptions: {
      type: Object,
      default: () => ({
        mergeKey: 'deal_code',
        mergeColumns: []
      })
    }
  },
  
  setup(props) {
    const processedData = ref([]);
    const loading = ref(false);
    
    const columns = computed(() => {
      if (props.rawData.length > 0) {
        return Object.keys(props.rawData[0])
          .filter(key => !key.startsWith('_'))
          .map(key => ({
            prop: key,
            label: key.replace(/_/g, ' ').toUpperCase(),
            width: key === 'deal_code' ? '180' : ''
          }));
      }
      return [];
    });
    
    async function processData() {
      loading.value = true;
      
      // 使用分块处理大数据量
      const chunkSize = 100;
      const chunks = [];
      
      for (let i = 0; i < props.rawData.length; i += chunkSize) {
        chunks.push(props.rawData.slice(i, i + chunkSize));
      }
      
      let result = [];
      for (const chunk of chunks) {
        result = result.concat(await processChunk(chunk));
        await new Promise(resolve => setTimeout(resolve, 0));
      }
      
      processedData.value = result;
      loading.value = false;
    }
    
    function processChunk(chunk) {
      const data = JSON.parse(JSON.stringify(chunk));
      const mergeMap = {};
      
      // 建立合并键到行索引的映射
      data.forEach((row, index) => {
        const keyValue = row[props.mergeOptions.mergeKey];
        if (!mergeMap[keyValue]) {
          mergeMap[keyValue] = [];
        }
        mergeMap[keyValue].push(index);
      });
      
      // 处理每个分组
      Object.values(mergeMap).forEach(group => {
        if (group.length > 1) {
          for (let i = 0; i < group.length - 1; i++) {
            const currentIdx = group[i];
            const nextIdx = group[i + 1];
            
            props.mergeOptions.mergeColumns.forEach(col => {
              if (data[currentIdx][col] === data[nextIdx][col]) {
                if (!data[currentIdx]._span) data[currentIdx]._span = {};
                if (!data[nextIdx]._span) data[nextIdx]._span = {};
                
                data[currentIdx]._span[col] = {
                  rowspan: (data[currentIdx]._span[col]?.rowspan || 1) + 1,
                  colspan: 1
                };
                
                data[nextIdx]._span[col] = { rowspan: 0, colspan: 0 };
              }
            });
          }
        }
      });
      
      return data;
    }
    
    function handleSpanMethod({ row, column }) {
      if (row._span && row._span[column.property]) {
        return row._span[column.property];
      }
      return { rowspan: 1, colspan: 1 };
    }
    
    watch(() => props.rawData, processData, { immediate: true, deep: true });
    
    return {
      processedData,
      columns,
      loading,
      handleSpanMethod
    };
  }
};
</script>

<style>
.el-table--border .el-table__cell {
  border-right: 1px solid var(--el-table-border-color);
}
</style>

9. 总结与扩展思考

在实际项目中实现表格合并功能时，有几个关键点值得特别注意：

1. 数据不可变性：始终在处理前深拷贝数据，避免污染原始数据
2. 算法效率：对于O(n²)复杂度的算法，要考虑分块处理大数据集
3. 可维护性：将合并逻辑与业务逻辑分离，便于复用和测试

这个方案还可以进一步扩展：

1. 多级合并：支持基于多个字段的层级合并（如先按交易号，再按商品分类）
2. 前端缓存：缓存处理结果，避免重复计算
3. 可视化配置：提供UI界面让用户自定义合并规则

通过这个实现，我们不仅解决了表格合并的基本需求，还建立了一个可扩展、高性能的解决方案，能够适应各种复杂的业务场景。