1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" id="table">
<template slot="body.append">
<tr><!-- 合計行を表示するため --></tr>
</template>
</v-data-table>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: "Dessert (100g serving)", value: "name" },
{ text: "Calories", value: "calories" },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
desserts: [
{ name: "Frozen Yogurt", calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: "1%" },
{ name: "Ice cream sandwich", calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: "1%" },
{ name: "Eclair", calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: "7%" },
{ name: "Cupcake", calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: "8%" },
{ name: "Gingerbread", calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: "16%" },
{ name: "Jelly bean", calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: "0%" },
{ name: "Lollipop", calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: "2%" },
{ name: "Honeycomb", calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: "45%" },
{ name: "Donut", calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: "22%" },
{ name: "KitKat", calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: "6%" }
]
};
},
mounted() {
let sumCalories = 0;
let sumFat = 0;
let sumCarbs = 0;
let sumProtein = 0;
this.desserts.forEach((element) => {
sumCalories = sumCalories + element.calories;
sumFat = sumFat + element.fat;
sumCarbs = sumCarbs + element.carbs;
sumProtein = sumProtein + element.protein;
});
const tbody = document.querySelector("#table > div > table > tbody");
const newRow = tbody.insertRow();
const totalNameCell = newRow.insertCell();
totalNameCell.classList.add("text-start");
totalNameCell.appendChild(document.createTextNode("合計"));
const totalCaloriesCell = newRow.insertCell();
totalCaloriesCell.classList.add("text-start");
totalCaloriesCell.appendChild(document.createTextNode(sumCalories));
const totalFatCell = newRow.insertCell();
totalFatCell.classList.add("text-start");
totalFatCell.appendChild(document.createTextNode(Math.floor(sumFat)));
const totalCarbsCell = newRow.insertCell();
totalCarbsCell.classList.add("text-start");
totalCarbsCell.appendChild(document.createTextNode(sumCarbs));
const totalProteinCell = newRow.insertCell();
totalProteinCell.classList.add("text-start");
totalProteinCell.appendChild(document.createTextNode(sumProtein));
const totalIronCell = newRow.insertCell();
totalIronCell.classList.add("text-start");
totalIronCell.appendChild(document.createTextNode(""));
},
};
</script>
|
