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 - ].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 = ; i < itemsCopy.length; i++) {
for (let j = (i + ); 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 = ;
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==){
return
}
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:;">删除</a>
</a-popconfirm>
</span>
</div>
</td>    
</tr>

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

vue 动态合并单元格、并添加小计合计功能的更多相关文章

  1. EasyUI-DataGrid动态合并单元格

    js /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&qu ...

  2. JQuery EasyUI DataGrid动态合并单元格

    /**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList ...

  3. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  4. easyui 自动动态合并单元格

    .......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...

  5. JSP动态合并单元格

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table ...

  6. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...

  7. easyUI----纵向合并单元格

    使用Easyui-DataGrid过程用.做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法. 解决方案: 代码一 onLoadSuccess: f ...

  8. poi导出Excel报表多表头双层表头、合并单元格

    效果图: controller层方法: /**     *      * 导出Excel报表     * @param request     * @return     *      */    @ ...

  9. easyUI---datagrid合并单元格代码实现

    1.html部分: <div id="table1"></div> 2.js部分: $('#table1').datagrid({ data : data, ...

随机推荐

  1. 简单安装与使用composer

    1.下载composer.exe工具,然后进行安装 这一步需要找到你使用的php版本文件 2.windows+r     cmd  输入composer 安装中国镜像,提高使用效率 https://p ...

  2. 怎么在const成员函数里面调用非const成员函数?

    举个例子: 定义了一个类的const实例,怎么让他也能调用非能调用非const成员函数class foo{public:void test1() {cout << "I am n ...

  3. 51nod 1021【区间DP】

    思路: dp[ i ] [ j ]代表取[ i ,j ]区间石子的最小值,然后dp[i][j]=min(dp[i][j],dp[i][k]+dp[k+1][j]+sum[j]-sum[i-1]); # ...

  4. C 语言实例 - 计算 int, float, double 和 char 字节大小

    C 语言实例 - 计算 int, float, double 和 char 字节大小 C 语言实例 C 语言实例 使用 sizeof 操作符计算int, float, double 和 char四种变 ...

  5. dp专题复习

    背包: 1.bzoj2287:[POJ Challenge]消失之物 2.bzoj2748:[HAOI2012]音量调节 3.bzoj2794:[Poi2012]Cloakroom 4.bzoj119 ...

  6. vue-cli 【flexible】屏幕字体自适应布局及配置

    0.前言: 很多前端小伙伴在写页面尤其是移动端页面的时候,要求页面布局以及字体大小随屏幕宽度变化而随之按比例自适应[注:非响应式],那么,在vue-cli脚手架中应该如何去实现呢? 1.安装flexi ...

  7. HDU6300(2018多校第一场)

    Bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6300 排个序就好了 #include<iostream> #include& ...

  8. Count on a tree II SPOJ - COT2 && bzoj1086 王室联邦 && bzoj2589

    https://cn.vjudge.net/problem/SPOJ-COT2 这个是树上莫队模版啊.. 树上莫队有两种,第一种就是括号序莫队 设节点i在括号序中首次出现位置为pl[i] 那么路径(i ...

  9. centos安装openldap过程

    1.下载软件如下,db是数据库 2.首先安装数据库db # tar xf db-4.8.30.tar.gz # cd db-4.8.30 # cd build_unix/ (# ../dist/con ...

  10. 115 Distinct Subsequences 不同子序列

    给定一个字符串 S 和一个字符串 T,求 S 的不同的子序列中 T 出现的个数.一个字符串的一个子序列是指:通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字符串.(譬如," ...