Table組件上設(shè)置：

:span-method="handleSpan"

在Data數(shù)據(jù)里存儲(chǔ)表格合并的相關(guān)數(shù)據(jù)：

// 記錄合并單元格的相關(guān)數(shù)據(jù) ? ? ? ? ? ? ? ?firstArr:[], ? ? ? ? ? ? ? ?firstPos:0, ? ? ? ? ? ? ? ?secondArr:[], ? ? ? ? ? ? ? ?secondPos:0, ? ? ? ? ? ? ? ?thirdArr:[], ? ? ? ? ? ? ? ?thirdPos:0,

?

核心方法，在methods里：

handleSpan({ row, column, rowIndex, columnIndex }){ ? ? ? ? ? ? ? ?if (columnIndex === 0) { ? ? ? ? ? ? ? ? ? ?// 第一列的合并方法 ? ? ? ? ? ? ? ? ? ?const row1 = this.firstArr[rowIndex]; ? ? ? ? ? ? ? ? ? ?const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 則他這個(gè)列需要取消 ? ? ? ? ? ? ? ? ? ?return { ? ? ? ? ? ? ? ? ? ? ? ?rowspan: row1, ? ? ? ? ? ? ? ? ? ? ? ?colspan: col1, ? ? ? ? ? ? ? ? ? ?}; ? ? ? ? ? ? ? ?} else if (columnIndex === 1) { ? ? ? ? ? ? ? ? ? ?// 第二列的合并方法 ? ? ? ? ? ? ? ? ? ?const row2 = this.secondArr[rowIndex]; ? ? ? ? ? ? ? ? ? ?const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 則他這個(gè)列需要取消 ? ? ? ? ? ? ? ? ? ?return { ? ? ? ? ? ? ? ? ? ? ? ?rowspan: row2, ? ? ? ? ? ? ? ? ? ? ? ?colspan: col2, ? ? ? ? ? ? ? ? ? ?}; ? ? ? ? ? ? ? ?} else if (columnIndex === 2) { ? ? ? ? ? ? ? ? ? ?// 第三列的合并方法 ? ? ? ? ? ? ? ? ? ?const row3 = this.thirdArr[rowIndex]; ? ? ? ? ? ? ? ? ? ?const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 則他這個(gè)列需要取消 ? ? ? ? ? ? ? ? ? ?return { ? ? ? ? ? ? ? ? ? ? ? ?rowspan: row3, ? ? ? ? ? ? ? ? ? ? ? ?colspan: col3, ? ? ? ? ? ? ? ? ? ?}; ? ? ? ? ? ? ? ?} ? ? ? ? ? ?},

在getDataList之后，計(jì)算合并數(shù)據(jù)信息：

integratedData(listData) { ? ? ? ? ? ? ? this.firstArr = []; ? ? ? ? ? ? ? ?this.firstPos = 0; ? ? ? ? ? ? ? ?this.secondArr = []; ? ? ? ? ? ? ? ?this.secondPos = 0; ? ? ? ? ? ? ? ?this.thirdArr = []; ? ? ? ? ? ? ? ?this.thirdPos = 0; ? ? ? ? ? ? ? ?for (let i = 0; i < listData.length; i += 1) { ? ? ? ? ? ? ? ? ? ?if (i === 0) { ? ? ? ? ? ? ? ? ? ? ? ?// 第一行必須存在 ? ? ? ? ? ? ? ? ? ? ? ?this.firstArr.push(1); ? ? ? ? ? ? ? ? ? ? ? ?this.firstPos = 0; ? ? ? ? ? ? ? ? ? ? ? ?this.secondArr.push(1); ? ? ? ? ? ? ? ? ? ? ? ?this.secondPos = 0; ? ? ? ? ? ? ? ? ? ? ? ?this.thirdArr.push(1); ? ? ? ? ? ? ? ? ? ? ? ?this.thirdPos = 0; ? ? ? ? ? ? ? ? ? ?} else { ? ? ? ? ? ? ? ? ? ? ? ?// 判斷當(dāng)前元素與上一個(gè)元素是否相同 ? ? ? ? ? ? ? ? ? ? ? ?// 第一列
　　　　　　　　　　　　　　// ?pageFieldsNames里存放的是第一列的field_name，第二列的field_name ...
? ? ? ? ? ? ? ? ? ? ? ?if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]) { ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.firstArr[this.firstPos] += 1; ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.firstArr.push(0); ? ? ? ? ? ? ? ? ? ? ? ?} else { ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.firstArr.push(1); ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.firstPos = i; ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ?// 第二列 ? ? ? ? ? ? ? ? ? ? ? ?if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]&&listData[i][this.pageFieldsNames[1]] === listData[i - 1][this.pageFieldsNames[1]]) { ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.secondArr[this.secondPos] += 1; ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.secondArr.push(0); ? ? ? ? ? ? ? ? ? ? ? ?} else { ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.secondArr.push(1); ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.secondPos = i; ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ?// 第三列 ? ? ? ? ? ? ? ? ? ? ? ?if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]&&listData[i][this.pageFieldsNames[1]] === listData[i - 1][this.pageFieldsNames[1]]&&listData[i][this.pageFieldsNames[2]] === listData[i - 1][this.pageFieldsNames[2]]) { ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.thirdArr[this.thirdPos] += 1; ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.thirdArr.push(0); ? ? ? ? ? ? ? ? ? ? ? ?} else { ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.thirdArr.push(1); ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.thirdPos = i; ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ?} ? ? ? ? ? ?}

來源鏈接：https://www.dianjilingqu.com/469821.html