Element UI - Table with nested data - How to loop a property - vuejs2

Question

I'm using last version of vue-js and element-ui whose documentation can be found here.
Context
I want to display a table containing some information about interested and attending people for a given date and room
Issue
I do not manage to display the attending and interested for each room and for each date.
The main problem is how to loop through each room
https://jsfiddle.net/k7Lzv38b/
Data
tableData: [{
date: 'Jan 2017',
rooms: [{
name: 'Room A',
attending: 10,
interested: 5
}, {
name: 'Room B',
attending: 10,
interested: 0
}]
}, {
date: 'Feb 2017',
rooms: [{
name: 'Room A',
attending: 10,
interested: 5
}, {
name: 'Room B',
attending: 10,
interested: 0
}]
}]

Answer 1

var Main = {
data() {
return {
tableData: [{
date: 'Jan 2017',
rooms: [{
name: 'Room A',
attending: 10,
interested: 5
}, {
name: 'Room B',
attending: 5,
interested: 10
}]
}, {
date: 'Feb 2017',
rooms: [{
name: 'Room A',
attending: 0,
interested: 5
}, {
name: 'Room B',
attending: 5,
interested: 15
}]
}, {
date: 'Mar 2017',
rooms: [{
name: 'Room B',
attending: 5
}]
}]
}
},
computed: {
rooms() {
let rooms = {}
this.tableData.forEach(row => {
row.rooms.forEach(room => {
rooms[room.name] = 1
})
})
return Object.keys(rooms)
}
},
methods: {
cellFormatter(row, col) {
let key = JSON.parse(col.property)
let d = row.rooms.find(r => r.name === key.room)
if (d && d[key.property]) {
return d[key.property]
}
return '0 '
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.0.5/lib/theme-chalk/index.css");
.container {
display: flex;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.0.5/lib/index.js"></script>
<div id="app">
<template>
<div class='container'>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" align="center"></el-table-column>
<el-table-column label="Rooms" align="center">
<el-table-column :label="room" prop="rooms" align="center" v-for="room in rooms" key="room">
<el-table-column label="Attending" :prop="JSON.stringify({room, property:'attending'})" align="center" :formatter="cellFormatter">
</el-table-column>
<el-table-column label="Intereted" :prop="JSON.stringify({room, property:'interested'})" align="center" :formatter="cellFormatter">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
</div>

Answer 2

To show nested data without looping use:
columns: [
{ prop: 'user_id', label: 'User ID' },
{ prop: 'market', label: 'Market ID', render: row => row.market.mkt_id },
{ prop: 'market', label: 'Pair', render: row => row.market.mkt_name },
{ prop: 'exchange', label: 'Exchange ID', render: row => row.exchange.exch_id },
{ prop: 'exchange', label: 'Exchange', render: row => row.exchange.exch_name }
]
JSON:
{
"user_id": 4,
"type_id": 1,
"market": {
"id": 270,
"mkt_id": 5946,
"mkt_name": "AEX",
},
"exchange": {
"id": 5,
"exch_id": 15,
"exch_name": "NL",
}
}

Answer 3

If there are only two rooms: A and B,
maybe you can simple use this 'prop' for the columns:
prop="rooms[0].attending"
prop="rooms[0].interested"
index 0 for room A and index 1 for room B