先上效果图，可根据需求自行修改代码
编辑
代码如下 先添加合并行或列的计算方法
编辑
在data中建立indexArr和indexPos
编辑
以下为合并行或列的计算方法
//indexArr来存放要合并的格数,同时还要没定一个变量indexPos来记录
this.indexArr = []
for (var i = 0; i < v.length; i++)
if (i === 0) {
//给当前数组添加一个1现在数组为[1]代表第一个各自占一行
this.indexArr.push(1)
//当前索引为0
this.indexPos = 0
}else {
//判断当前元素与上一个元素是否相同
if (v[i].system === v[i - 1].system) {
//给当前素引下合并的格子数量 自增1 例如 现在是[1]增加用后变为[2]代表现在合并的格子数量为2
this.indexArr[this.indexPos] += 1
//给数组添加一个0因为有格子合并了他的位置当前被合并的格子需要隐藏, 所以当前被合并的格子占0行是隐藏状态,数组为[2,0]
this.indexArr.push(0)
else {
//当两行的数据不相同时 则给新的数据 合并的格子数量为1
this.indexArr.push(1)
//将当前索引 赋值为 便于this.indexArr[this.indexPos]修改相对应索引的合并的格子数量
this.indexPos = i
}
}
}
以下为合并行或列的计算方法后的返回值
objectSpanMethod({ row, column, rowindex, columnindex}){
if (columnIndex === 0) {
//当前行占几个合并的格子数量
const _row = this.firstlevelindexArr[rowIndex]
//判断当前行合并的格子数量是否大于0 用于单元格的展示与隐藏
// const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan:1,//不可赋值为0 可为了方便直接赋值为1
}
}
}
在created的生命周期里先调用上面的计算方法
