一、需求简述

项目中需要实现单元格的合并，即实现下图的效果。

查阅了Element官方文档后，发现官方文档只能固定死合并多少多少行，无法根据表格内容做变换。

所以在查阅了很多文章后，最后参考elementui table 第一列内容相同 自动合并单元格 el-table第一列内容相同自动合并_element table 合并第一列所有行-CSDN博客

，写出本篇文章，上文实现了第一列内容相同时自动合并。本文对其进行改进，实现前两列自动合并，后续需要更多列的合并可以参考本篇文章，下面是效果展示以及实现方法。

二、效果展示

1、合并前

2、合并后

三、实现方法

本方法在实现时，如果第一列内容相同，则将第一列进行合并；如果第一列和第二列的内容相同，则将第二、三、四分别合并，以下是实现代码。

<template>
  <div>    
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 70%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="home"
        label="家庭住址">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
        id: '1',
        name: '王小虎',
        home: '上海',
        phone: '123456',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '1',
        name: '王小虎',
        home: '上海',
        phone: '123456',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '1',
        name: '王小虎',
        home: '上海',
        phone: '123456',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '2',
        name: '小张',
        home: '北京',
        phone: '456789',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '3',
        name: '小刘',
        home: '南京',
        phone: '789456',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]
      };
    },
    methods: {
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if(columnIndex === 0){
         //此处处理第一列
         const _row = (this.flitterData(this.tableData).one)[rowIndex]
         const _col = _row > 0 ? 1 : 0
         return {
           rowspan: _row,
           colspan: _col
         }
        }else if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3){
         //此处处理第二、三、四列
         const _row = (this.flitterData2(this.tableData).one)[rowIndex]
         const _col = _row > 0 ? 1 : 0
         return {
            rowspan: _row,
            colspan: _col
          }
        }
      }，
      flitterData(arr) {
       let spanOneArr = []; // 初始化一个空数组，用于存储合并行的标记
       let concatOne = 0; // 初始化变量，用于记录上一个需要合并的元素的索引
       arr.forEach((item, index)=>{ // 遍历数组
       if(index === 0){
         spanOneArr.push(1) // 如果是第一个元素，直接标记为1（表示这是一个新的开始）
         }else{
           if(item.id === arr[index-1].id){ // 如果当前元素的id与上一个元素的id相同
           spanOneArr[concatOne] += 1 // 则将上一个标记加1（表示需要合并的行数增加）
           spanOneArr.push(0) // 然后标记当前位置为0（表示这不是一个新的开始）
         }else{
           spanOneArr.push(1) // 如果id不同，则标记当前位置为1（表示这是一个新的开始）
           concatOne = index // 更新记录上一个需要合并的元素的索引
         };
       }
      });
      return {
        one: spanOneArr // 返回标记数组
      }
    },
    flitterData2(arr) {
     let spanOneArr = []; // 初始化空数组
     let concatOne = 0; // 初始化变量
     arr.forEach((item, index)=>{ // 遍历数组
     if(index === 0){
       spanOneArr.push(1) // 第一个元素标记为1
       }else{
         if(item.id === arr[index-1].id && item.name === arr[index-1].name){ // 判断id和name是否都相同
         spanOneArr[concatOne] += 1 // 如果相同，则更新上一个标记
         spanOneArr.push(0) // 标记当前位置为0
       }else{
         spanOneArr.push(1) // 如果不同，标记当前位置为1
         concatOne = index // 更新索引
       };
      }
     });
     return {
       one: spanOneArr // 返回标记数组
     }
    }
   }
 };
</script>