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)
}
};
}
});
复制代码
所有评论(0)