300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Element_Table的单元格合并

Element_Table的单元格合并

时间:2021-07-09 23:49:14

相关推荐

Element_Table的单元格合并

在进行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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。