Vue+elementui表格行转列+动态生成列头 |
您所在的位置：网站首页 › 如何将excel表的行和列互换 › Vue+elementui表格行转列+动态生成列头 |
Vue+elementui表格行转列+动态生成列头
|
这里跟上一篇要求表格数据动态绑定是同一个模块,在表格填完数据以后要求生成一个报告;最后的实际月份字段中的数据有多少个月份就生成多少列;里面的数据要对应cashin表和cashout表中相同月份比例后值的的累加金额 效果如图
下面表格的数据是根据上面表格的数据生成的,业务就不多介绍了; 直接上代码 部分的代码时这样的,也是从别的博客复制粘贴过来的,为啥这么写到现在也没整明白,反正好使就对了 下面是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记录自己学习与成长的一点一滴,希望我的经验也能对大家有所帮助,谢谢;
|
【本文地址】