skysan87 · September 5, 2020 10:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8">
  <title>結合テーブル</title>
  <style>
    * {
      box-sizing: border-box;
    }

    #app {
      max-width: 640px;
      margin: 0 auto;
    }
  </style>
 </head>

 <body>

  <div id="app">
    <table border="1">
      <thead>
        <tr>
          <th>Group Id</th>
          <th>Id</th>
          <th>Name</th>
          <th>Value</th>
          <th>Ammount of Value</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="r in records">
          <td :rowspan="calcRowspan(r.group_id)" v-if=isFirstIndex(r)>
            {{ r.group_id }}
          </td>
          <td>{{ r.id }}</td>
          <td>{{ r.name }}</td>
          <td>{{ r.value }}</td>
          <td :rowspan="calcRowspan(r.group_id)" v-if=isFirstIndex(r)>
            {{ sum(r.group_id) }}
          </td>
        </tr>
      </tbody>

    </table>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const _data = [
      { id: 1, name: 'one1', value: 1, group_id: 1 },
      { id: 2, name: 'one2', value: 2, group_id: 1 },
      { id: 3, name: 'one3', value: 3, group_id: 1 },
      { id: 4, name: 'one4', value: 4, group_id: 2 },
      { id: 5, name: 'one5', value: 5, group_id: 3 },
      { id: 6, name: 'one6', value: 6, group_id: 4 },
      { id: 7, name: 'one7', value: 7, group_id: 4 },
      { id: 8, name: 'one8', value: 8, group_id: 5 }
    ];

    new Vue({
      el: '#app',
      data: {
        records: []
      },
      mounted() {
        this.records = _data;
      },
      methods: {
        calcRowspan(key) {
          return this.records.filter(r => r.group_id === key).length;
        },
        isFirstIndex(item) {
          const group = this.records.filter(r => r.group_id === item.group_id);
          return group.indexOf(item) === 0;
        },
        sum(key) {
          return this.records.reduce((acc, r) => {
            if (r.group_id === key) {
              acc += r.value
            }
            return acc;
          }, 0);
        }
      }
    })
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>結合テーブル</title>
	<style>
	* {
	box-sizing: border-box;
	}

	#app {
	max-width: 640px;
	margin: 0 auto;
	}
	</style>
	</head>

	<body>

	<div id="app">
	<table border="1">
	<thead>
	<tr>
	<th>Group Id</th>
	<th>Id</th>
	<th>Name</th>
	<th>Value</th>
	<th>Ammount of Value</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="r in records">
	<td :rowspan="calcRowspan(r.group_id)" v-if=isFirstIndex(r)>
	{{ r.group_id }}
	</td>
	<td>{{ r.id }}</td>
	<td>{{ r.name }}</td>
	<td>{{ r.value }}</td>
	<td :rowspan="calcRowspan(r.group_id)" v-if=isFirstIndex(r)>
	{{ sum(r.group_id) }}
	</td>
	</tr>
	</tbody>

	</table>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
	const _data = [
	{ id: 1, name: 'one1', value: 1, group_id: 1 },
	{ id: 2, name: 'one2', value: 2, group_id: 1 },
	{ id: 3, name: 'one3', value: 3, group_id: 1 },
	{ id: 4, name: 'one4', value: 4, group_id: 2 },
	{ id: 5, name: 'one5', value: 5, group_id: 3 },
	{ id: 6, name: 'one6', value: 6, group_id: 4 },
	{ id: 7, name: 'one7', value: 7, group_id: 4 },
	{ id: 8, name: 'one8', value: 8, group_id: 5 }
	];

	new Vue({
	el: '#app',
	data: {
	records: []
	},
	mounted() {
	this.records = _data;
	},
	methods: {
	calcRowspan(key) {
	return this.records.filter(r => r.group_id === key).length;
	},
	isFirstIndex(item) {
	const group = this.records.filter(r => r.group_id === item.group_id);
	return group.indexOf(item) === 0;
	},
	sum(key) {
	return this.records.reduce((acc, r) => {
	if (r.group_id === key) {
	acc += r.value
	}
	return acc;
	}, 0);
	}
	}
	})
	</script>
	</body>

	</html>