:data="tableData"
:span-method="objectSpanMethod"
spanArr1:[],
pos1:0,
this.pos1 = 0
this.spanArr1 = []
this.getSpanArr1(this.tableData)
objectSpanMethod({ row, column, rowIndex, columnIndex }){
/* 此方法总共运行次数与有几列几行有关，如果有5列30行，那么都是从0开始作为第一行第一列，
(行，列):0,0 0,1 0,2 0,3 0,4 0,5 1,0...*/
// 0,1,5表示需要处理 第 1，2，5列的行进行合并处理
if (columnIndex === 0 ) {
/*
将需要合并的行数赋值给 _row，注意这里由上一个方法的输出可以知道，这里的值可以是 3或者0
当为 3 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格向下合并 _row 格
当为 0 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格隐藏
*/
const _row = this.spanArr1[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if (columnIndex === 1 ) {
/*
将需要合并的行数赋值给 _row，注意这里由上一个方法的输出可以知道，这里的值可以是 3或者0
当为 3 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格向下合并 _row 格
当为 0 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格隐藏
*/
const _row = this.spanArr2[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
getSpanArr1(data) {
// 遍历数据
for (let i = 0; i < data.length; i++) {
// 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
if (i === 0) {
this.spanArr1.push(1);
this.pos1 = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].firstName === data[i - 1].firstName) {
// 如果相同就将索引为 pos 的值加一
this.spanArr1[this.pos1] += 1;
// 且将数组添加 0
this.spanArr1.push(0);
} else {
// 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
// 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
this.spanArr1.push(1);
// 同时 索引加一
this.pos1 = i;
}
}
}
},
