表格总共23列65行,数据量还是比较大的,后端按顺序返回65行数据。
以下需要注意:第一列的columnIndex 是0,第二列columnIndex 是1,第一行的rowIndex是0,第二行的rowIndex是1,以此类推......
数据量大的时候,中间的数据有的需要合并,有的不需要合并,就一定要用上setRowCol(0,0)和setRowCol(1,1)。在这次需求中,我就被坑了,开始误解了setRowCol(0,0)的意思,以为代表不合并,只占一行的写了这句就可以了,到最后发现最后一行的最后几列合在了一起。
setRowCol(0,0)代表被合并掉的行,也就是被隐藏起来的行;
setRowCol(1,1)代表,该列下,合并一行一列,也就是相当于不合并。
arraySpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {//第一列
return this.setRowCol(10, 1);//第一列的一到十行合并,
} else if (rowIndex === 10) {
return this.setRowCol(15, 1);//第一列的11到25行合并,总共合并15行
} else if (rowIndex === 25) {
return this.setRowCol(14, 1);
} else if (rowIndex === 39) {
return this.setRowCol(21, 1);
} else if (rowIndex === 60) {
return this.setRowCol(4, 1);
} else if (rowIndex === 64) {
return this.setRowCol(1, 1);
} else {
return this.setRowCol(0, 0);
}
} else if (columnIndex === 2) {
if (rowIndex === 0 || rowIndex === 5) {
return this.setRowCol(5, 1);
} else if (
rowIndex === 10 ||
rowIndex === 17 ||
rowIndex === 25 ||
rowIndex === 32 ||
rowIndex === 53
) {
return this.setRowCol(7, 1);
} else if (rowIndex === 24) {
return this.setRowCol(1, 1);
} else if (rowIndex === 39) {
return this.setRowCol(14, 1);
} else if (rowIndex === 60) {
return this.setRowCol(4, 1);
} else if (rowIndex === 64) {
return this.setRowCol(1, 1);
} else {
return this.setRowCol(0, 0);
}
} else if (columnIndex === 20 || columnIndex === 22) {
if (rowIndex === 0) {
return this.setRowCol(10, 1);
} else if (rowIndex === 10) {
return this.setRowCol(15, 1);
} else if (rowIndex === 25) {
return this.setRowCol(14, 1);
} else if (rowIndex === 39) {
return this.setRowCol(21, 1);
} else if (rowIndex === 60) {
return this.setRowCol(4, 1);
} else if (rowIndex === 64) {
return this.setRowCol(1, 1);
} else {
return this.setRowCol(0, 0);
}
} else if (
columnIndex === 15 ||
columnIndex === 16 ||
columnIndex === 17 ||
columnIndex === 18
) {
if (rowIndex < 39 || rowIndex === 64) {
return this.setRowCol(1, 1);
} else if (rowIndex === 39) {
return this.setRowCol(25, 1);
} else {
return this.setRowCol(0, 0);
}
}
},
//直接调用setRowCol传入rowspan和colspan即可
setRowCol(rowspan, colspan) {
return {
rowspan,
colspan,
};
},