vue+element-ui实现表格内容合并

效果:

<el-table show-summary :data="datas" border :span-method="MethodFn">
 <el-table-column align="center" label="测试表头">
    <el-table-column prop="recoverySituation" label="测试" min-width="120" align="center">
            <template slot-scope='scope'>
                 {{scope.row.recoverySituation}}
            </template>
    </el-table-column>
    <el-table-column prop="usageState" label="测试2" min-width="120" align="center">
		<template slot-scope='scope'>
                 {{scope.row.usageState}}
          </template>
    </el-table-column>
    <el-table-column prop="district" label="测试3" min-width="180" align="center">
            <template slot-scope='scope'>
		        {{scope.row.district}}
            </template>
   </el-table-column>
   <el-table-column prop="cpuNum" label="测试4" min-width="60" align="center"/>
   <el-table-column prop="memNum" label="测试5" min-width="60" align="center"/>
 </el-table-column>
</el-table>

     data() {
      return {
          datas: [
              {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "待回收",
               "usageState": "待沟通", 
               "district": "阿里爸爸", 
               "cpuNum": 8, 
               "memNum": 999, 
               "comment": "1111",
               "create_time": 1650351389945
              },
                {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "已回收",
               "usageState": "已分配", 
               "district": "阿里妈妈23", 
               "cpuNum": 8, 
               "memNum": 160, 
               "comment": "1111",
               "create_time": 1650351389945
              },
               {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "已回收",
               "usageState": "已分配", 
               "district": "阿里妈妈23", 
               "cpuNum": 8, 
               "memNum": 160, 
               "comment": "1111",
               "create_time": 1650351389945
              },
               {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "已回收",
               "usageState": "未分配", 
               "district": "阿里妈妈4", 
               "cpuNum": 8, 
               "memNum": 16, 
               "comment": "1111",
               "create_time": 1650351389945
              },
                {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "已回收",
               "usageState": "未分配", 
               "district": "阿里妈妈4", 
               "cpuNum": 8, 
               "memNum": 16, 
               "comment": "1111",
               "create_time": 1650351389945
              },
                {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "已回收",
               "usageState": "未分配", 
               "district": "阿里妈妈4", 
               "cpuNum": 88, 
               "memNum": 16, 
               "comment": "1111",
               "create_time": 1650351389945
              },
                {
               "_id": "ab3a275a-2705-489b-be69-801cc7c5bf16", 
               "recoverySituation": "已回收",
               "usageState": "未分配", 
               "district": "阿里妈妈4", 
               "cpuNum": 8, 
               "memNum": 16, 
               "comment": "1111",
               "create_time": 1650351389945
              }]
           }
         }

methods: {

getTableData() {
       let spanOneArr = [],
           spanTwoArr = [],
           concatOne = 0,
           concatTwo = 0;
       this.datas.forEach((item, index) => {
   if (index === 0) {
   	spanOneArr.push(1);
   	spanTwoArr.push(1);
   } else {
       //第一列需合并相同内容的判断条件
   if (item.recoverySituation === this.datas[index - 1].recoverySituation) { 
           spanOneArr[concatOne] += 1;
           spanOneArr.push(0);
   } else {
           spanOneArr.push(1)
           concatOne = index
   }
       //第二列和第16列需合并相同内容的判断条件
   if (item.usageState === this.datas[index - 1].usageState) { 
   spanTwoArr[concatTwo] += 1;
   spanTwoArr.push(0);
   } else {
   spanTwoArr.push(1)
   concatTwo = index
   }
   }
})
   return {
       one: spanOneArr,
       two: spanTwoArr
   }
},
                                           
objectJBXXMethod({row, column, rowIndex,columnIndex }) {
   if (columnIndex === 0) {
   const _row = (this.getTableData(this.datas)?.one)[rowIndex];
   const _col = _row > 0 ? 1 : 0;
       
   return {
           rowspan: _row,
           colspan: _col
        }
   }
   
if (columnIndex === 1) {
const _row = (this.getTableData(this.datas)?.two)[rowIndex];
const _col = _row > 0 ? 1 : 0;
           return {
               rowspan: _row,
               colspan: _col
           }
       }
   },
};