项目要求：

（1）第一列合并的行数根据后台传来的数据进行判断，同一类的就进行合并，所以这个需要判断每一类都多少个数据，就合并多少行 getSpanArr方法功能就是知道合并的行数

（2）每一类的最后一行都进行合并，合并除了第一列之外的所有的列，所以这个需要知道你要合并的所有的列是在第几行

 代码以及注释如下：

html：

 <!--注意：列表这里比较特殊，数据结构比较特殊，第一：接接口的时候让后台按照死数据的数据结构进行传送，第二：每页只显示三种门店-->
<el-table :data="tableData" class="ems-table borderstyle" :span-method="objectSpanMethod"  style="width: 100%;">
  <el-table-column prop="sellerName" label="商品名称" width="180"></el-table-column>
  <el-table-column prop="typeName" label="分类类型" :class="'ddd'"></el-table-column>
  <el-table-column prop="date" label="月份"></el-table-column>
  <el-table-column prop="total" label="总用量"></el-table-column>
  <el-table-column prop="money" label="金额（元）"></el-table-column>
</el-table>

js：

 // 1、 发请求获取数据 这个方法放到created或者是mounted中进行调用，默认页面打开就开始获取数据
    dataList () {
     billManage(query).then(res => {
        // 合并行数函数的调用
        this.getSpanArr(res.data)
      })
    }
 // 2、 因为要合并的行数是不固定的，此函数是实现合并随意行数的功能
    getSpanArr (data) {
      console.log(data)//从后台获取的数据
      this.spanArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].sellerName === data[i - 1].sellerName) {
            // 如果useName相等就累加，并且push 0
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 不相等push 1
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
      console.log(this.spanArr)
    }
// 3、合并行数
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
    // columnIndex === 0 找到第一列，实现合并随机出现的行数
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
        // columnIndex === 1 找到第二列，实现合并第2到4列
      } else if (columnIndex === 1) {
        for (var i = 0; i < this.spanArr.length; i++) {
          // 筛选数组中数值不是0的数
          if (this.spanArr[i] > 1) {
            // console.log(i, this.spanArr[i])
            // 发现的规律：当前索引 + 索引所对应的数值 - 1 = 所要合并的第几行
            if (rowIndex === (i + this.spanArr[i] - 1)) {
              setTimeout(() => {
                console.log(document.querySelectorAll(`tr:nth-of-type(${i + this.spanArr[i]})`), i + this.spanArr[i])
                document.querySelectorAll(`tr:nth-of-type(${i + this.spanArr[i]}) td div`)[0].style.float = 'right'
                document.querySelectorAll(`tr:nth-of-type(${i + this.spanArr[i]}) td div`)[0].style.marginRight = '10%'
              }, 0)
              return {
                rowspan: 1,
                colspan: 4
              }
            }
          }
        }
      }
    }

最终效果以及后台数据格式展示：

2019/5/13 更

今天看了vue官网的api才发现，api提供了一种 nextTick方法，其功能是在数据响应完全之后再对数据进行操作，所以上面的代码中，我用setTimeout定时器来完成的功能完全可以使用nextTick来完成，具体的demo在我的博客中：https://blog.csdn.net/zhumizhumi/article/details/90718990