・Vueでどうサブグリッドを表現するかサンプルを以下に示す。
考え方
・v-forの中でもう一つv-forを使い、2つ目のv-for内でv-ifで表示する要素をコントロールする。
サンプル
<div>
<h2>サブグリッド サンプル</h2>
<div class="subgrid_sample" style="">
<div class="" v-for="row in データリスト親">
<!-- 親：ヘッダー -->
<div class="oya header">
<div class="pcol1">
親項目名1
</div>
<div class="pcol2">
親項目名2
</div>
</div>
<!-- 親：内容 -->
<div class="oya">
<div class="pcol1">
｛｛row.項目名1｝｝
</div>
<div class="pcol2">
<input v-model="row.項目名2" />
</div>
</div>
<!-- 子：ヘッダー -->
<div class="ko header">
<div>
子項目名1
</div>
<div>
子項目名2
</div>
<div>
子項目名3
</div>
</div>
<!-- 子：内容 -->
<div class="" v-for="row2 in データリスト子">
<div class="ko" v-if="row.関連ID === row2.関連ID">
<div>
｛｛row2.項目1｝｝
</div>
<div>
｛｛row2.項目2｝｝
</div>
<div>
<input v-model="row2.項目3" />
</div>
</div>
</div>
<div>
<button>サブグリッド行追加</button>
</div>
</div>
<div style="height:60px;"></div>
<div>
<button>親グリッド行追加</button>
</div>
</div>
</div>