项目要求：
（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：
// 合并行数
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
}
}
}
}
}
},
// 因为要合并的行数是不固定的，此函数是实现合并随意行数的功能
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)
},最终效果以及后台数据格式展示：
