vue动态合并单元格并添加小计合计功能示例

这篇文章主要给大家介绍了关于vue动态合并单元格并添加小计合计功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1、效果图

2、后台返回数据格式（平铺式）

3、后台返回数据后，整理所需要展示的属性存储到（items）数组内

 var obj = { "id": curItems[i].id, "feeName": curItems[i].feeName, "projectName": curItems[i].projectName, "projectDetailsName": curItems[i].projectDetailsName, "zbMoney": curItems[i].zbMoney, "qyMoney": curItems[i].qyMoney, "projectId": curItems[i].projectId, "instructions": curItems[i].instructions, "contentText": curItems[i].contentText, "measureText": curItems[i].measureText } if (curItems[i].projectDetailsName == '合计:') { obj.projectName = curItems[i - 1].projectName } _self.items.push(obj) }

4、调用initData(调用后会删除需要合并的字段内容)

_self.initData()

 initData(){ const that = this; let arry = []; let itemsCopy = JSON.parse(JSON.stringify(that.items)); for (let i = 0; i <itemsCopy.length; i++) { for (let j = (i + 1); j <itemsCopy.length; j++) { for (let h in itemsCopy[i]) { for (let k in itemsCopy[j]) { if (k == 'feeName' || k == 'projectName' || k == 'projectDetailsName') { if (itemsCopy[j][k] != '小计:' && itemsCopy[j][k] != '合计:') { if (h === k && itemsCopy[i][h] === itemsCopy[j][k]) { delete itemsCopy[j][k] } } } } } } arry.push(itemsCopy[i]); } that.dataT = arry; },

4、合并行数的代码

 rowSpanF: function (key, val) { const that = this; let num = 0; for (let i in that.items) { for (let j in that.items[i]) { if (j == 'feeName' || j == 'projectName' || j == 'projectDetailsName') { if (key === j && val === that.items[i][j]) { if (that.items[i][j] == '小计:' || that.items[i][j] == '合计:') { return } num++; } } } } if(num==0){ return 1 } return num; },

5、html

代码如下：

 　　 　　　　  {{val}}{{val}}{{val}}{{val}}{{val}}{{item['zbMoney']+item['qyMoney']}}{{val}} {{val}}{{val}}  <!--添加-->编辑  deletArr(item)"> 删除　　　　 

注意事项：

后台返回数据必须符合该条件

总结

到此这篇关于vue动态合并单元格并添加小计合计功能的文章就介绍到这了,更多相关vue动态合并单元格添加小计合计内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

以上就是vue动态合并单元格并添加小计合计功能示例的详细内容，更多请关注本站其它相关文章！