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

Easter79
• 阅读 321

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:;">删除</a>
                  </a-popconfirm>
              </span>
            </div>
          </td>    
        </tr>

 注意事项:
后台返回数据必须符合该条件

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

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

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
刚刚好 刚刚好
2个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue