VUE展示数据--object里面的value为一个数组

VUE展示数据--object里面的value为一个array, 其他的都是正常展示. 遇到的难点在于需要把每一项的数组里面的第0,1,2,3..项求和.

数据结构如图所示:

需要展示的样式如图所示:

代码: HTML部分:

<table id="app-1">
    <thead>
        <tr v-for="(values, keys) in object" v-if="keys == 'disEnterprise'">
            <th>
                <span>机构</span>
            </th>
            <th v-for="value in values">
                <span>{{ value }}</span>
            </th>
            <th>
                <span>合计</span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(values, keys) in object" v-if="keys != 'disEnterprise'">
            <td>
                <span>{{ keys }}</span>
            </td>
            <td v-for="value in values">
                <span>{{ value }}</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>合计</span>
            </td>
            <td v-for="value in sumRecord">
                <span>{{ value }}</span>
            </td>
        </tr>
    </tbody>
</table>
复制代码

JS部分:

var app1 = new Vue({ 
	el: '#app-1', 
	data: { 
		object: {}, 
		sumRecord: [] 
	} 
});
复制代码

$.ajax({
    url: "${ctx}" + "/dim/dimSupplyAccountCollect/getAccountCollectByTime.html",
    dataType: "json",
    type: 'post',
    data: {
        start: start,
        end: end
    },
    success: function (data) {
	    //表格头部和内容的数据
        app1.object = data;
        //底部合计的数据, 构造出一个数组,计算出各条数据的总和
        var companySize = data.disEnterprise.length + 1;
        if (companySize > 0) {
            app1.sumRecord = new Array(companySize); 
            //初始化数组的每一项为0,不然后面进行相加的时候结果为NaN
            for (var k = 0; k < companySize; k++) {
                 app1.sumRecord[k] = 0; 
                } 
            //两次循环,第一次循环得到object中的key,第二次循环得到数组里面的value并相加放到前面的定位的数组中
            for (item in data) {
                if (data.hasOwnProperty(item)) {
                    if (item != "disEnterprise") {
                        for (var j = 0; j < companySize; j++) {
                            var t = data[item]; 
                            app1.sumRecord[j] += t[j];
                        }
                    }
                }
            }
            //数组里的值取两位小数 
            for (var h = 0; h < app1.sumRecord.length; h++) {
                app1.sumRecord[h] = app1.sumRecord[h].toFixed(2)
            }
        };
    }
 });
复制代码

转载于:https://juejin.im/post/5af057096fb9a07ab1111b20