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
代码如下:
<tr v-for="(item,$index) in dataT"> <td v-if="key!='id'&&(key=='feeName'||key=='projectName'||key=='projectDetailsName'||key=='zbMoney'||key=='qyMoney'||key=='projectId'||key=='instructions'||key=='contentText'||key=='measureText')" v-for="(val,key) in item" :rowspan="rowSpanF(key,val)"> <span v-if="key=='feeName'">{{val}}</span> <span v-if="key=='projectName'">{{val}}</span> <span v-if="key=='projectDetailsName'">{{val}}</span> <span v-if="key=='zbMoney'">{{val}}</span> <span v-if="key=='qyMoney'">{{val}}</span> <span v-if="key=='projectId'">{{item['zbMoney']+item['qyMoney']}}</span> <span v-if="key=='instructions'">{{val}} </span> <span v-if="key=='contentText'">{{val}}</span> <span v-if="key=='measureText'">{{val}}</span> </td> <td> <div v-if="item.projectDetailsName!='小计:'&&item.projectDetailsName!='合计:'"> <!--<span @click="toAdd(allItems[$index])"><a>添加</a></span>--> <span @click="toEdit(item)"><a>编辑</a></span> <span> <a-popconfirm title="确定删除吗" okText="确定" cancelText="取消" @confirm="() => deletArr(item)"> <a href="javascript:;" rel="external nofollow" >删除</a> </a-popconfirm> </span> </div> </td> </tr>
注意事项:
后台返回数据必须符合该条件
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue动态合并单元格并添加小计合计功能示例”评论...
更新动态
20240527
20240527
- 赵传《赵传歌曲合集》[320K/MP3][692.4MB]
- [发烧极品]群星《天籁试音极品-震撼(西乐篇)》2CD[WAV+CUE]
- 群星-《发烧中的国语时代曲K2HD》[WAV+CUE]
- [珍纳精选]人声发烧天碟珍藏版《JHEENALODWICKGREATEST》1:1直刻[WAV+CUE]
- 群星-《发烧中的精选SAMPLERAUDIOPHILE》AMCD限量版[WAV+CUE]
- 群星《情缘难续·发烧人声》(黑胶)2CD[WAV+CUE]
- 吴淑敏.2003-为情为爱梦一生【巨人唱片】【WAV+CUE】
- 张国荣《张国荣歌曲合集》[320K/MP3][334.4MB]
- 周华健《周华健歌曲合集》[320K/MP3][521MB]
- 张韶涵《张韶涵歌曲合集》[320K/MP3][486.2MB]
- 陈芯怡.2023-漫行日志【鼎乐】【FLAC分轨】
- 梁韵.1986-香港夜上海(TP版)【上海音像】【WAV+CUE】
- 韦唯-我相信中国[上海文艺音像首版]WAV+CUE
- 张雨生《张雨生歌曲合集》[320K/MP3][196MB]
- 张杰《张杰歌曲合集》[320K/MP3][300.4MB]