element el-table 合并相同的多列的单元格(亲测可用)

有时候需求就比较奇葩
要实现这种基本的表格很简单

而官方给出的合并表格就很笼统 基本不能实现需求要达到的效果

所以就需要我们自己去站在官方的肩膀上去开发新的逻辑
我遇到的需求就是要去合并每多列相同的元素,并且跟前面相互照应

如果按照官方的方式是不可能实现这种效果的
上代码

<el-table
                            :data="tableData"
                            width="100%"
                            border
                            :header-cell-style="{ background: '#EEF5FFFF', color: '#666666FF' }"
                            :span-method="arraySpanMethod"
                            style="border: 1px solid #F2F8FFFF;">
                            <!-- <el-table-column type="index" label="序号" width="70px"></el-table-column> -->
                            <el-table-column prop="serviceItemName" label="服务项目"></el-table-column>
                            <el-table-column prop="memberSystemName" label="服务体系"></el-table-column>
                            <el-table-column prop="memberSystemId" label="详细服务介绍">
                              <template scope="tableData">
                                <a class="aa" @click="ValueAddedDetails(tableData.row.memberSystemId,tableData.row.serviceItemId)">查看</a>
                              </template>
                            </el-table-column>
                            <el-table-column prop="serviceItemId" label="使用详情">
                              <template scope="tableData">
                                <a class="aa" @click="UsageDetails(tableData.row.serviceItemId)">明细</a>
                              </template>
                            </el-table-column>
                            <el-table-column prop="serviceItemId" label="使用状态">
                                <template scope="tableData">
                                <a>{{tableData.row.usageStatus}}</a>
                              </template>
                            </el-table-column>
                        </el-table>

        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 3|| columnIndex === 4) {
            if (this.mergeObj[column.property][rowIndex]) {
              return {
                rowspan:this.mergeObj[column.property][rowIndex],
                colspan:1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          } 
        },

接下来就是给mergeObj赋值了 看代码

for (let key in vm.tableData[0]) {
                  vm.mergeObj[key] = []
                  vm.tableData.forEach((item,index) => {
                    if (index === 0) {
                      vm.mergeObj[key].push(1)
                    } else {
                      if (item[key] === vm.tableData[index-1][key]) {
                        vm.mergeObj[key][numerical] += 1;
                        vm.mergeObj[key].push(0)
                      } else {
                        numerical = index
                        vm.mergeObj[key].push(1)
                      }
                    }
                  })
                }

把上面那段代码写到获取数据的哪里
columnIndex 这个表示想要合并第几列 从0开始
因为用这个方法合并的时候他只能合并相邻一样的数据
比如 A B C C A 合并出来就是 A B C A
但是我们需要是A B C C A合并出来是A B C
这是就用到了vue的排序功能
将他们进行排序之后就能

    sortList(lists){                // lists传的是数组
      return lists.sort((a, b) => {
          return a['serviceItemId'].localeCompare(b['serviceItemId'])     // grapheme为字母对应的属性名
        })
    },

用这个方法将后台返回的数据进行排序这样就能正常合并了
还有要注意的就是 prop="" 不能为空 哪怕不不合并该列 也要写上参数 要不然会报错,影响到后面的数据

我把我遇到的坑都写出来,欢迎大家指导,一起探讨前端技术

20210423修改
用了两天之后发现这块代码有问题,如果循环的时候出现undefined 那么页面就会出现乱合并的现象,景狗研究之后发现这块需要改一下

        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 3|| columnIndex === 4) {
            if (this.mergeObj[serviceItemId][rowIndex]) {
              return {
                rowspan:this.mergeObj[serviceItemId][rowIndex],
                colspan:1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          } 
        },

这个是修改之后的,这块的取值要与上面循环的那个值相对应