vue+element 的单列表格合并

前一段时间做项目的时候遇到了这个问题。用element文档里的试了，不可行。
最后百度后找到办法，果然还是广大网友和百度厉害。
效果如下：

代码如下：

<el-table :data="allTruckLossData" :span-method="objectSpanMethod" border style="width: 100%;" class="detailTable">
<!--表格内容-->
</el-table>

:span-method 是方法。

    // 表格合并 :span-method
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 第一列的合并处理
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 合并处理 相同车辆合并属性
    mountedTable() {
      let contactDot = 0
      this.allTruckLossData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          this.spanArr.push(1)
        } else {
          // 后一个和前一个相比，相同的存入同一个index,不同的存入index++，**有顺序要求，所以要先排序**
          if (item.id=== this.allTruckLossData[index - 1].id) {
            this.spanArr[contactDot] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            contactDot = index
          }
        }
      })
    },

就在这里：mountedTable() 这个方法使用之后如果存在没有合并在一起的行，那就要对你在表格中绑定的数据进行排序处理。