Vue
HTML
<div id="app">
<table v-for="table in tables">
<thead>
<th>Code</th>
<th>Name</th>
</thead>
<tbody>
<tr v-for="row in table">
<td>{{row.code}}</td>
<td>{{row.name}}</td>
</tr>
</tbody>
</table>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
new Vue({
el: "#app",
data: {
someData: [
{
code: 1,
name: 'test1'
},
{
code: 2,
name: 'test2'
},
{
code: 2,
name: 'test3'
},
{
code: 1,
name: 'test4'
},
{
code: 1,
name: 'test5'
},
{
code: 3,
name: 'test6'
}
]
},
computed: {
tables() {
let tabs = {};
this.someData.forEach((el, i) => (i = parseInt(el.code), tabs[i] ? tabs[i].push(el) : (tabs[i] = [el])));
return tabs;
}
}
})