:data="tableData"
:span-method="objectSpanMethod"
spanArr1:[],
pos1:0,
this.pos1 = 0
this.spanArr1 = []
this.getSpanArr1(this.tableData)
objectSpanMethod({ row, column, rowIndex, columnIndex }){
/* 此方法總共運行次數(shù)與有幾列幾行有關(guān)，如果有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 ) {
/*
將需要合并的行數(shù)賦值給 _row，注意這里由上一個方法的輸出可以知道，這里的值可以是 3或者0
當(dāng)為 3 時，表示將當(dāng)下的第 rowIndex+1 行與第 columnIndex+1 列所指向的單元格向下合并 _row 格
當(dāng)為 0 時，表示將當(dāng)下的第 rowIndex+1 行與第 columnIndex+1 列所指向的單元格隱藏
*/
const _row = this.spanArr1[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if (columnIndex === 1 ) {
/*
將需要合并的行數(shù)賦值給 _row，注意這里由上一個方法的輸出可以知道，這里的值可以是 3或者0
當(dāng)為 3 時，表示將當(dāng)下的第 rowIndex+1 行與第 columnIndex+1 列所指向的單元格向下合并 _row 格
當(dāng)為 0 時，表示將當(dāng)下的第 rowIndex+1 行與第 columnIndex+1 列所指向的單元格隱藏
*/
const _row = this.spanArr2[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
getSpanArr1(data) {
// 遍歷數(shù)據(jù)
for (let i = 0; i < data.length; i++) {
// 如果是第一個數(shù)據(jù)，就將列表spanArr添加一個1，表示暫時只有一個名字相同的、且將索引pos賦值為0
if (i === 0) {
this.spanArr1.push(1);
this.pos1 = 0
} else {
// 判斷當(dāng)前元素與上一個元素是否相同
if (data[i].firstName === data[i - 1].firstName) {
// 如果相同就將索引為 pos 的值加一
this.spanArr1[this.pos1] += 1;
// 且將數(shù)組添加 0
this.spanArr1.push(0);
} else {
// 如果元素不同了，就可以通過索引為 pos 的值知曉應(yīng)該需要合并的行數(shù)
// 同時，我們再次添加一個值1，表示重新開始判斷重復(fù)姓名的次數(shù)
this.spanArr1.push(1);
// 同時 索引加一
this.pos1 = i;
}
}
}
},
