使用vue+element ui的table 以及原生table写表格 完成合并行和列

1.需求：合并第5行，6行，7行的前6列
效果图：

使用table编写

<table class="detail-list" border="1">
          <tr>
            <th>
              <div>序号</div>
              <div>No.</div>
            </th>
            <th>
              <div>项目号</div>
              <div>Project No.</div>
            </th>
            <th>名称  Description</th>
            <th>
              <div>规格型号</div>
              <div>Spec.</div>
            </th>
            <th> 
              <div>数量</div>
              <div>Qty.</div>
            </th>
            <th>
              <div>单价</div>
              <div>Unit Price</div>
            </th>
            <th>
              <div>总价</div>
              <div>Total Price</div>
            </th>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index">
            <td class="col">{{item.a}}</td>
            <td class="col-2">{{item.a}}</td>
            <td class="col">{{item.a}}</td>
            <td class="col">{{item.a}}</td>
            <td class="col">{{item.a}}</td>
            <td class="col txt-right">{{item.a}}</td>
            <td class="col txt-right">{{item.a}}</td>
          </tr>
          <tr>
            <td colspan="6" class="tit txt-right bold">
              <div>不含税总价：</div>
              <div>Total Price Without Tax:</div>
            </td>
            <td class="bold">{{'$1111'}}</td>
          </tr>
          <tr>
            <td colspan="6" class="tit txt-right bold">
              <div>税率：</div>
              <div>Tax Rate:</div>
            </td>
            <td>{{'1111'}}</td>
          </tr>
          <tr>
            <td colspan="6" class="tit txt-right bold">
              <div>含税总价：</div>
              <div>Total Price Including Tax:</div>
            </td>
            <td class="bold">{{'$1111'}}</td>
          </tr>
        </table>

css：

.detail-list {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
  th {
    font-size: 14px;
    div {
      padding: 2px 0;
    }
  }
  th, td {
    padding: 10px;
  }
  .col {
    width: calc(100% / 8);
  }
  .col-2 {
    width: calc(100% / 8 * 2);
  }
  .tit {
    padding: 10px;
    font-size: 14px;
    div {
      padding: 2px 0;
    }
  }
  .bold {
    font-weight: bold;
  }
  .txt-right {
    text-align: right;
  }
 }

使用element ui table表格编写
html 省略哈。可参考官网上的标签来写
对应js 方法：

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 4) {
        return [1, 6];
      } else if (rowIndex === 5) {
        return [1, 6];
      } else if (rowIndex === 6) {
        return [1, 6];
      } else {
        return [1, 1]; //
      }
    },