VUE element ui 动态合并单元格问题

** VUE element ui 动态合并单元格问题**

1.基础方法
//最开始从网上找到了一个基本的可以同时兼顾行和列的方法，时间太久忘记出自哪里了.如下：

//效果

//绑定 :span-method=“arraySpanMethod”

<el-table
          :data="tableData"
          :span-method="arraySpanMethod"
          style="width: 100%"
          class="monOrdUpTable"
          :header-cell-style="{
            background: 'rgb(243, 243, 243)',
            color: 'rgb(55, 54, 54)',
          }"
          border
          :height="tableHeight"
        >

//JS

   arraySpanMethod({
     row, column, rowIndex, columnIndex }) {
   
      // 合并行列产品名字相同合并（计算组长度以内的列，需要进行合并操作的列）
      let mergeLength = 3; //需要进行横纵合并的列
      if (columnIndex < mergeLength) {
   
        let finArray = [1, 1];
        // 处理行数据
        let cgname = Object.keys(row)[columnIndex];
        // console.log(cgname);
        if (
          rowIndex === 0 ||
          row[cgname] !== this.tableData[rowIndex - 1][cgname]
        ) {
   
          let rowspan = 1;
          //计算需要进行合并操作的行
          for (let i = 0; i < this.tableData.length - 1; i++) {
   
            // 只合并连续的
            if (
              this.tableData[i][cgname] === row[cgname] &&
              this.tableData[i + 1][cgname] === row[cgname]
            ) {
   
              rowspan++;
            }
          }
          finArray[0] = rowspan;
        } else {
   
          finArray[0] = 0;
        }
        // 处理列数据
        let colkeys = Object.keys(row);
        let cgvalue = Object.values(row)[columnIndex];
        if (
          columnIndex === 0 ||
          row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]]
        ) {
   
          let colspan = 1;
          //计算需要进行合并操作的列
          for (let i = columnIndex; i < mergeLength; i++) {
   
            // 只合并连续的
            if (
              row[colkeys[i]] === cgvalue &&
              row[colkeys[i + 1]] === cgvalue &&
              i + 1 < mergeLength
            ) {
   
              colspan++;
            }
          }
          finArray[1] = colspan;
        } else {
   
          finArray[1] = 0;
        }
        return finArray;
      }
    },

//第一次没有改代码，直接就成功了。

2.进阶：电费单价合并要与ITEM合并逻辑一致，而不是看单价是否相同合并；ITEM合并时，要在相同厂区的前提下。(这个问题，4中有更简便的解决方法)