【Vue.js】多次元配列のデータをテーブルにうまいこと表示するには

2023年1月28日Javascript,開発

おはようございます。

驚愕。最後に vue の記事を書いたのが 2021年8月。

うそでしょ。1年半くらい気絶でもしてたんか。

うん。そういうことにしておこう。

気を取り直して、

ちょっと入れ子のデータ配列をテーブルに表示する機会があったので備忘。

何も考えずに tr に v-for を付けてもうまくいかないんですよね。

1. プログラム
2. 起動してみる
3. まとめ

プログラム

CSS

css/style.css

@charset "UTF-8";

body
{
	font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
	font-size:12px;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
	font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
}

div#app .table-container{
	height: 400px;
	max-height: 400px;
	overflow-y: auto;
	margin: 10px 0px;
}

@charset "UTF-8";

body

{

font-family:Helvetica,'Helvetica Neue','Mplus 1p','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,メイリオ,Osaka,'MS PGothic'!important;

font-size:12px;

}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6

{

font-family:Helvetica,'Helvetica Neue','Mplus 1p','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,メイリオ,Osaka,'MS PGothic'!important;

}

div#app .table-container{

height:400px;

max-height:400px;

overflow-y:auto;

margin:10px0px;

}

html

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Vue で Hello World</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body class="hold-transition fixed skin-blue-light sidebar-mini ">
<div class="wrapper" >
<div style="margin: 20px;">
<pre>
Vue.js で データ配列を元にテーブルを動的に生成するサンプル。

入れ子になっているデータ配列を処理する場合、tr に v-for を設定するとうまく出来ない。
template タグを使って疑似的にループさせるとうまく出来る。

</pre>
</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<div id="app">
					<div class="table-container">
						<table class="table">
							<thead>
								<tr>
									<th>項目１</th>
									<th>項目２</th>
								</tr>
							</thead>
							<tbody>
								<template v-for="group in groupList">
									<tr style="background: #eee;">
										<th colspan="2">{{ group.name }}</th>
									</tr>
									<template v-for="item in group.itemList">
										<tr>
											<td>{{ item.item1 }}</td>
											<td>{{ item.item2 }}</td>
										</tr>
									</template>
								</template>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vue で Hello World</title>

</head>

<pre>

Vue.js でデータ配列を元にテーブルを動的に生成するサンプル。

入れ子になっているデータ配列を処理する場合、tr に v-for を設定するとうまく出来ない。

template タグを使って疑似的にループさせるとうまく出来る。

</pre>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<th colspan="2">{{ group.name }}</th>

</tr>

<tr>

</tr>

</template>

</tbody>

</table>

</div>

</body>

</html>

Javascript

js/script.js

/**
 * Vueインスタンス生成
 */
const app = new Vue({
	el: '#app',
	data: {
		groupList: [
			{ name:'グループ１', itemList:[ 
					{ item1: 'グループ１－１', item2: 'グループ１－２' },
					{ item1: 'グループ２－１', item2: 'グループ２－２' }
				] },
			{ name:'グループ２', itemList:[ { item1: 'グループ２－１', item2: 'グループ２－２' }] },
			{ name:'グループ３', itemList:[ { item1: 'グループ３－１', item2: 'グループ３－２' }] },
			{ name:'グループ４', itemList:[ { item1: 'グループ４－１', item2: 'グループ４－２' }] },
		]
	},
	methods: {
	}
})