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

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
        }]
      }]

Daniel · Accepted Answer · 2018-05-04 14:56:26Z

4

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/[email protected]/lib/theme-chalk/index.css");
.container {
  display: flex;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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>

edited May 4, 2018 at 14:56

answered Dec 6, 2017 at 3:34

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Craig Wayne Over a year ago

Thank You so much!!! is this documented somewhere? this "formatter" usage

Daniel Over a year ago

it is in element.eleme.io/#/en-US/component/table formatter function that formats cell content Function(row, column, cellValue)

renoirb Over a year ago

This is a nice complete(!), but I would rename renderCell as formatter (or similar), because you're using method signature Function(row, column, cellValue, index). Render functions has different meaning, since we're only formatting scalar value (i.e. not HTML). Also, there is a renderCell method that actually is like a Vue Render function Function(h, { column, $index }) unfortunately, only render-header method is overridable. See also what @[michiel-zoer] does below.

Daniel Over a year ago

Thanks @renoirb for pointing that out; I've updated the function name.

Michiel Zoer · Accepted Answer · 2017-12-28 10:01:20Z

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",
  }
}

answered Dec 28, 2017 at 10:01

Michiel Zoer

211 bronze badge

1 Comment

Léo Coco Over a year ago

It sounds like a nice solution ! Would you be able to show us a full example with jsfiddle to see how it applies ?

once · Accepted Answer · 2018-09-21 10:55:11Z

0

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

answered Sep 21, 2018 at 10:55

once

1,3994 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

Context

Issue

Data

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Context

Issue

Data

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related