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


Posted in Vue.js onNovember 26, 2020

1、效果图

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

2、后台返回数据格式(平铺式)

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

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;
  },

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

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

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

代码如下:

<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>

注意事项:

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

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

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

总结

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

Vue.js 相关文章推荐
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
You might like
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php数组去重的函数代码
2013/02/03 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
layui原生表单验证的实例
2019/09/09 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python re模块介绍
2014/11/30 Python
python实现数独算法实例
2015/06/09 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python面向对象之继承代码详解
2018/01/29 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python组合无重复三位数的实例
2018/11/13 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
进程的查看和调度分别使用什么命令
2015/03/25 面试题
优秀的2014年两会精神解读
2014/03/17 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
保护环境演讲稿
2014/05/10 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
超市收银员岗位职责
2015/04/07 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
2019消防宣传标语!
2019/07/10 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python