在进行Table的单元格合并的时候,出现了bug:合并第一列的第 x 和 x+1 行时,第x+2行的数据被第二列的数据替换,之后表格中的数据均向前移动了一格,导致数据展示错乱
分析
在进行单元格合并时,未考虑到动态合并单元格,导致合并单元格的方法每次遍历rowIndex行索引时错乱,未能成功识别x+1的行索引,产生了错误。
html
<a-table :span-method="spanMetod"><template #columns><a-table-column title="名称" align="center" prop="name"><template #cell="{record}">{{record.name}}</template></a-table-column></template></a-table>
javascript
<script>let subjectRowNum = null;//记录第一列的每个科目占多少格子let countNum = null;// 记录第二列各类计划占多少格子watchEffect(()=>{subjectRowNum = [0];countNum = [0];subjectRowNum.push(plan1.length + plan2.length +plan3.length );countNum.push(countNum[countNum.length-1]+plan1.length);countNum.push(countNum[countNum.length-1]+plan2.length);countNum.push(countNum[countNum.length-1]+plan3.length);})function spanMetod((rowIndex,columnIndex,record,column)) {// 对第一列的要求进行合并if (columnIndex === 0) {const tempIndex = subjectRowNum.indexOf(rowIndex);if (tempIndex > -1) {return{rowspan:subjectRowNum[tempIndex +1] - subjectRowNum[tempIndex]}}}else if(columnIndex === 1){// 对第二列的要求进行合并if (tempIndex > -1) {return{rowspan:countNum[tempIndex +1] - countNum[tempIndex]}}}}</script>