vue 原生table合并相同数据的单元格 （跨行/跨列）

html结构如下 ， table原生表格， 数据是后台请求回来的

        <table
            :border="1"
            cellpadding="15"
            cellspacing="0"
            width="100%"
            id="tableId"
          >
            <tr v-for="(item, index) in list" :key="index">
              <td class="name">{{ item.area }}</td>
              <td>{{ item.shortName }}</td>
              <td>{{ item.customercount }}</td>
              <td>{{ item.visitedcustomercount }}</td>
              <td>{{ item.visitedrate }}</td>
              <td>{{ item.sfkhcountDr }}</td>
              <td>{{ item.sfkhcount }}</td>
              <td>{{ item.changerate }}</td>
              <td>{{ item.areasort }}</td>
            </tr>
          </table>

页面如下，需求 ：左边区域名一样的行合并

合并行的方法：

tb ：需要合并的表格id

colLength ：需要对前几列进行合并，比如想合并前两列，后面的列忽略合并，colLength应为2  ， 不传表示对全部列合并

  mergeTableCell(tb, colLength) {
      tb = document.getElementById(tb);
      var i = 0;
      var j = 0;
      var rowCount = tb.rows.length;
      var colCount = tb.rows[0].cells.length;
      var obj1 = null;
      var obj2 = null;
      //为每个单元格命名
      for (i = 0; i < rowCount; i++) {
        for (j = 0; j < colCount; j++) {
          tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
        }
      }
      //合并行
      for (i = 0; i < colCount; i++) {
        if (i == colLength) return;
        obj1 = document.getElementById("tb__0_" + i.toString());
        for (j = 1; j < rowCount; j++) {
          obj2 = document.getElementById(
            "tb__" + j.toString() + "_" + i.toString()
          );
          if (obj1.innerText == obj2.innerText) {
            obj1.rowSpan++;
            obj2.parentNode.removeChild(obj2);
          } else {
            obj1 = document.getElementById(
              "tb__" + j.toString() + "_" + i.toString()
            );
          }
        }
      }
    },

调用方法 ： 

请求到数据后，直接调用方法改变dom ，一定要写在this.$nextTick中！！！不然dom还没改变完，此时的表格没有渲染完毕 ， 之前研究了好久没出来就是因为没有写到nextTick中。。大坑 

//上面是请求数据的代码

this.$nextTick(() => {
          this.mergeTableCell("tableId", 1);
        });

效果如下

合并列的方法：

  mergeTableCell(tb, colLength) {
      tb = document.getElementById(tb);
      var i = 0;
      var j = 0;
      var rowCount = tb.rows.length;
      var colCount = tb.rows[0].cells.length;
      var obj1 = null;
      var obj2 = null;
      //为每个单元格命名
      for (i = 0; i < rowCount; i++) {
        for (j = 0; j < colCount; j++) {
          tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
        }
      }

    // 合并列
         for (i = 0; i < rowCount; i++) {
             colCount = tb.rows[i].cells.length;
             obj1 = document.getElementById(tb.rows[i].cells[0].id);
             for (j = 1; j < colCount; j++) {
                 if (j >= colLength) break;
                 if (obj1.colSpan >= colLength) break;
                 obj2 = document.getElementById(tb.rows[i].cells[j].id);
                 if (obj1.innerText == obj2.innerText && ((obj2.innerText != "" || obj1.innerText != "")&&(obj1.innerText != "-"|| obj2.innerText != "-"))) {
                     obj1.colSpan++;
                     obj2.parentNode.removeChild(obj2);
                     j = j - 1;
                     
                 }
                 else {
                     obj1 = obj2;
                     j = j + obj1.rowSpan;
                     
                 }
             }
         }

    },