利用vue怎么实现动态合并单元格

　　介绍

这篇文章将为大家详细讲解有关利用vue怎么实现动态合并单元格,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强> 1,效果图

利用vue怎么实现动态合并单元格

<强> 2,后台返回数据格式(平铺式)

利用vue怎么实现动态合并单元格

<强> 3,后台返回数据后,整理所需要展示的属性存储到数(项)组内

var  obj =, { 　　,,,“id":, curItems[我].id, 　　,,,“feeName":, curItems[我].feeName, 　　,,,“projectName":, curItems[我].projectName, 　　,,,“projectDetailsName":, curItems[我].projectDetailsName, 　　,,,“zbMoney":, curItems[我].zbMoney, 　　,,,“qyMoney":, curItems[我].qyMoney, 　　,,,“projectId":, curItems[我].projectId, 　　,,,“instructions":, curItems[我].instructions, 　　,,,“contentText":, curItems[我].contentText, 　　,,,“measureText":, curItems[我].measureText 　　,,} 　　,,if  (curItems[我].projectDetailsName ==, & # 39;合计:& # 39;),{ 　　,,,obj.projectName =, curItems .projectName小姐;作用;1 　　,,} 　　,,_self.items.push (obj) 　　以前,,}

<强> 4,调用initData(调用后会删除需要合并的字段内容)

_self.initData ()

initData () { 　　const 才能;that =,; 　　let 才能;arry =, []; 　　let 才能;itemsCopy =, JSON.parse (JSON.stringify (that.items)); 　　for 才能;(let 小姐:=,0;,小姐:& lt;, itemsCopy.length;,我+ +),{ 　　,,for  (let  j =,(小姐:+,- 1);,j  & lt;, itemsCopy.length;, j + +), { 　　,,for  (let  h 拷贝itemsCopy[我]),{ 　　,,,for  (let  k 拷贝itemsCopy [j]), { 　　,,,if  (k ==, & # 39; feeName& # 39;, | |, k ==, & # 39; projectname # 39;, | |, k ==, & # 39; projectDetailsName& # 39;), { 　　,,,,if  (itemsCopy [j] [k], !=, & # 39;小计:& # 39;,,,,itemsCopy [j] [k], !=, & # 39;合计:& # 39;),{ 　　,,,,if  (h ===, k ,,, itemsCopy[我][h],===, itemsCopy [j] [k]), { 　　,,,,,delete  itemsCopy [j] [k] 　　,,,,} 　　,,,,} 　　,,,} 　　,,,} 　　,,} 　　,,} 　　,,arry.push (itemsCopy[我]); 　　,,} 　　that.dataT =,才能进行; 　　},才能

利用vue怎么实现动态合并单元格

<强> 4,合并行数的代码

rowSpanF:, function (钥匙,,val), { 　　const 才能;that =,; 　　let 才能;num =, 0; 　　for 才能;(let 小姐:拷贝that.items), { 　　,,for  (let  j 拷贝that.items[我]),{ 　　,,if  (j ==, & # 39; feeName& # 39;, | |, j ==, & # 39; projectname # 39;, | |, j ==, & # 39; projectDetailsName& # 39;), { 　　,,,if  (key ===, j ,,, val ===, that.items[我][j]), { 　　,,,if  (that.items[我][j],==, & # 39;小计:& # 39;,| |,that.items[我][j],==, & # 39;合计:& # 39;),{ 　　,,,,回来 　　,,,} 　　,,,num + +; 　　,,,} 　　,,} 　　,,} 　　,,} 　　 　　如果才能(num==0) { 　　,,return  1 　　,,} 　　return 才能,num; 　　,,},

<强> 5,html

利用vue怎么实现动态合并单元格

代码如下:

& lt; tr  v=?项目,美元指数),拷贝dataT"比;, 　　,,& lt;道明 　　,,v=霸砍?=& # 39;id # 39;,,(关键==& # 39;feeName& # 39; | |关键==& # 39;projectname # 39; | |关键==& # 39;projectDetailsName& # 39; | |关键==& # 39;zbMoney& # 39; | |关键==& # 39;qyMoney& # 39; | |关键==& # 39;projectId& # 39; | |关键==& # 39;指令# 39;| |关键==& # 39;contentText& # 39; | |关键==& # 39;measureText& # 39;)“; 　　,,v=?val,键),拷贝item",:行宽=皉owSpanF(关键,val)“比; 　　,,& lt; span  v=肮丶?=& # 39;feeName& # 39;“在{{val}} & lt;/span> 　　,,& lt; span  v=肮丶?=& # 39;projectname # 39;“在{{val}} & lt;/span> 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

利用vue怎么实现动态合并单元格