Vue+elementui表格行转列+动态生成列头
这里跟上一篇要求表格数据动态绑定是同一个模块,在表格填完数据以后要求生成一个报告;最后的实际月份字段中的数据有多少个月份就生成多少列;里面的数据要对应cashin表和cashout表中相同月份比例后值的的累加金额效果如图下面表格的数据是根据上面表格的数据生成的,业务就不多介绍了;直接上代码<el-table ref="outable"border id="out-table1":data="
·
这里跟上一篇要求表格数据动态绑定是同一个模块,在表格填完数据以后要求生成一个报告;最后的实际月份字段中的数据有多少个月份就生成多少列;里面的数据要对应cashin表和cashout表中相同月份比例后值的的累加金额
效果如图
下面表格的数据是根据上面表格的数据生成的,业务就不多介绍了;
直接上代码
<el-table ref="outable"
border id="out-table1"
:data="reportsData"
style="width: 100%"
height="200px"
text-align="center">
<el-table-column v-for="col in cols" width="150px"
v-bind:key="col in cols"
:prop="col.prop" :label="col.label">
</el-table-column>
</el-table>
<template>部分的代码时这样的,也是从别的博客复制粘贴过来的,为啥这么写到现在也没整明白,反正好使就对了
下面是JavaScript部分
btnClickReport() {
this.reportAccording = true;//点击按钮显示报告的Card部分
//初始化
this.cols = [{ prop: 'project', label: '' }];
this.reportsData = [];
this.reportsData2 = [];
let arr = new Array();
let arrMonth1 = new Array();
let arrMonth2 = new Array();
let actualMonth1 = new Array();
let actualMonth2 = new Array();
for (let i = 0; i < this.listdata.length; i++) {
actualMonth1[i] = this.listdata[i].actualmonth;
}
arrMonth1 = actualMonth1;
for (let i = 0; i < this.listdata2.length; i++) {
actualMonth2[i] = this.listdata2[i].actualmonth;
}
arrMonth2 = actualMonth2;
//对存月份的数组进行排序去重,以便后面循环把每个月的总金额累加起来
let arrMonth = arrMonth1.concat(arrMonth2);
arrMonth.sort();
let re = [arrMonth[0]];//临时数组
for (let i = 1; i < arrMonth.length; i++) {
if (arrMonth[i] !== re[re.length - 1]) {
re.push(arrMonth[i]);
}
}
//用上面的方法进行排序去重,如果表格中有某行数据没填的话,月份数组的第0个元素是空字符串,用shift方法删掉第0个元素并返回新的数组
arrMonth = re;
if (arrMonth[0] == '') {
arrMonth.shift();
}
arr.push(arrMonth);//添加
let cashinCost = 0;//cashin金额累加值
let cashoutCost = 0;//cashout金额累加值
let arrCashin = new Array();
let arrCashout = new Array();
//循环判断金额累加;
for (let i = 0; i < arrMonth.length; i++) {
for (let j = 0; j < this.listdata.length; j++) {
if (arrMonth[i] == this.listdata[j].actualmonth) {
cashinCost += this.listdata[j].pCost;
}
else {
continue;
}
}
arrCashin.push(cashinCost);
cashinCost = 0;
}
arr.push(arrCashin);//添加
for (let i = 0; i < arrMonth.length; i++) {
for (let j = 0; j < this.listdata2.length; j++) {
if (arrMonth[i] == this.listdata2[j].actualmonth) {
cashoutCost += this.listdata2[j].pCost;
}
else {
continue;
}
}
arrCashout.push(cashoutCost);
cashoutCost = 0;
}
arr.push(arrCashout);//添加
for (let i = 0; i < arrMonth.length; i++) {
this.cols.push({ prop: arrMonth[i], label: arrMonth[i] })//prop=list2表中的实际月份
}
//这里把月份数组的值加载成每一列的列头,并且生成纵向的表头
let obj = new Object();
for (let i = 0; i < arrCashin.length; i++) {
obj["project"] = "cash in";
obj[arrMonth[i]] = arrCashin[i];
}
let obj2 = new Object();
for (let i = 0; i < arrCashout.length; i++) {
obj2["project"] = "cash out";
obj2[arrMonth[i]] = arrCashout[i];
}
for (let i = 0; i < obj.length; i++) {
if (obj.arrMonth[i] == 0 && obj2.arrMonth[i] == 0) {
delete obj.arrMonth[i];
delete obj2.arrMonth[i];
}
}
this.reportsData.push(obj);
this.reportsData.push(obj2);
this.reportsDataOut.push(obj);
this.reportsDataOut.push(obj2);
let arrInflow = new Array();
for (let i = 0; i < arrMonth.length; i++) {
if (i == 0) {
arrInflow[0] = arrCashin[0];
}
else {
for (let j = 0; j < i + 1; j++) {
arrInflow[i] = 0;
arrInflow[i] = parseFloat(arrCashin[j]) + parseFloat(arrInflow[i - 1]);
}
}
}
let objout = new Object();
for (let i = 0; i < arrInflow.length; i++) {
objout["project"] = "Inflow";
objout[arrMonth[i]] = arrInflow[i];
}
this.reportsData2.push(objout);
this.reportsDataOut.push(objout);
let arrOutflow = new Array();
for (let i = 0; i < arrMonth.length; i++) {
if (i == 0) {
arrOutflow[0] = arrCashout[0];
}
else {
for (let j = 0; j < i + 1; j++) {
arrOutflow[i] = 0;
arrOutflow[i] = parseFloat(arrCashout[j]) + parseFloat(arrOutflow[i - 1]);
}
}
}
let arrEntity = new Array();
for (let i = 0; i < arrMonth.length; i++) {
arrEntity[i] = arrInflow[i] - arrOutflow[i];
}
for (let i = 0; i < arrOutflow.length; i++) {
arrOutflow[i] = arrOutflow[i] * -1;
}
let objout2 = new Object();
for (let i = 0; i < arrCashout.length; i++) {
objout2["project"] = "Outflow";
objout2[arrMonth[i]] = arrOutflow[i];
}
this.reportsData2.push(objout2);
this.reportsDataOut.push(objout2);
let objout3 = new Object();
for (let i = 0; i < arrCashout.length; i++) {
objout3["project"] = "Entity cash curve";
objout3[arrMonth[i]] = arrEntity[i];
}
this.reportsData2.push(objout3);
this.reportsDataOut.push(objout3);
debugger;
console.log(this.reportsData);
console.log(this.reportsData[0][arrMonth[0]]);
console.log(this.reportsData2[0].project);
//没有钱的月份删除
//甲方要求的如果这个月的cashin和cashout的钱数都为零的话那这个月就不要了,都没花钱也没挣钱还输出他干什么
for (let i = 0; i < arrMonth.length; i++) {
if (this.reportsData[0][arrMonth[i]] == 0 && this.reportsData[1][arrMonth[i]] == 0) {
//因为用这种方法生成的列头是动态的,所以想要取到对象中的字段就要利用起来加载列头时用到的数组
delete this.reportsData[0][arrMonth[i]];
delete this.reportsData[1][arrMonth[i]];
delete this.reportsData2[0][arrMonth[i]];
delete this.reportsData2[1][arrMonth[i]];
delete this.reportsData2[2][arrMonth[i]];
delete this.reportsDataOut[0][arrMonth[i]];
delete this.reportsDataOut[1][arrMonth[i]];
delete this.reportsDataOut[2][arrMonth[i]];
delete this.reportsDataOut[3][arrMonth[i]];
delete this.reportsDataOut[4][arrMonth[i]];
this.cols.splice(1,1);
//这里的reportsDataOut表是一个不显示的导出Excel表格用的table
}
}
},
最后输出的数据是这样的,月份被加载成了列头;所以访问对象中的属性时需要用到加载列头时用到的数组;
到这里就成功做出了一个动态生成列头并且有纵向表头的表格了;
我是爱敲代码的冬马和纱,刚入行的大专实习生程序员,在CSDN记录自己学习与成长的一点一滴,希望我的经验也能对大家有所帮助,谢谢;
更多推荐
已为社区贡献1条内容
所有评论(0)