Vue+elementui表格行转列+动态生成列头

这里跟上一篇要求表格数据动态绑定是同一个模块,在表格填完数据以后要求生成一个报告;最后的实际月份字段中的数据有多少个月份就生成多少列;里面的数据要对应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记录自己学习与成长的一点一滴,希望我的经验也能对大家有所帮助,谢谢;