vue 动态合并单元格、并添加小计合计功能
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 动态合并单元格、并添加小计合计功能的更多相关文章
- EasyUI-DataGrid动态合并单元格
js /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&qu ...
- JQuery EasyUI DataGrid动态合并单元格
/** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- JSP动态合并单元格
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table ...
- html table动态合并单元格 js方法
<script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...
- easyUI----纵向合并单元格
使用Easyui-DataGrid过程用.做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法. 解决方案: 代码一 onLoadSuccess: f ...
- poi导出Excel报表多表头双层表头、合并单元格
效果图: controller层方法: /** * * 导出Excel报表 * @param request * @return * */ @ ...
- easyUI---datagrid合并单元格代码实现
1.html部分: <div id="table1"></div> 2.js部分: $('#table1').datagrid({ data : data, ...
随机推荐
- webpack内置模块ProvidePlugin
webpack配置ProvidePlugin后,在使用时将不再需要import和require进行引入,直接使用即可. 使用方法: 在webpack.dev.conf.js和webpack.prod. ...
- 2019ICPC西安邀请赛 - B. Product - 数论
打印的时候麻烦把:https://blog.csdn.net/skywalkert/article/details/50500009这个打印下来. 求\(\prod\limits_{i=1}^{n} ...
- 如何实现一个无边框Form的移动和改变大小(二)
接着上文:这里写链接内容 我们来说说一个比较复杂的实现, 效果如图: 注意为了能够凸显没有NC(NotClient)区域,我们额外用了3个panel分别放在窗体的左右和下部.用来模拟客户自己的控件. ...
- bzoj 2406: 矩阵【二分+有源汇上下界可行流】
最大值最小,所以考虑二分 |Σaij-Σbij|<=mid,所以Σbij的上下界就是(Σaij-mid,Σaij+mid) 考虑建有上下界网络,连接(s,i,Σaik-mid,Σaik+mid) ...
- Html5shiv ---- 让IE低版本浏览器识别并支持HTML5标签
Html5shiv.js是针对IE浏览器的 javaScript 补丁,作用如题 该脚本的下载链接 使用使在head标签中使用script标签引用即可
- C 语言实例 - 计算平均值
C 语言实例 - 计算平均值 C 语言实例 C 语言实例 使用数组来计算几个数的平均值. 实例 #include <stdio.h> int main() { int n, i; ], s ...
- vs 对网站和项目使用IIS Express 的64位版
- 测试 | 单元测试工具 | JUnit | 参数化
被测试类: package project; public class MyCalendar2 { public int getNumberOfDaysInMonth(int year, int mo ...
- [题解]区间dp_luogu_P3147 262144
小数据版本P3146,可以区间dp, 性质:对于一个区间如果能合并成一个数,那么这个数是确定的 理解:把每个数看做 2^x 的形式,那么如果合并:2^x + 2^x =2^(x+1) 所以 f [ i ...
- vue教程1-初体验
起步 var vm = new Vue({ // 选项 }) #每个Vue应用都需要通过实例化Vue来实现,语法格式继承原生js <!DOCTYPE html> <html lang ...