How to display nested cells in Element UI table? - vue.js

Question

I am using Element UI. I have nested data that I need to display in table. The problem that I can't understand how to display nested data.
Here is my code:
<el-table :data="tableData" stripe border>
<el-table-column width="170" prop="id"></el-table-column>
<el-table-column width="170">
<template slot-scope="scope">
<!-- -->
</template>
</el-table-column>
</el-table>
data section:
tableData: [
{
"id":1,
"nested": [{"name": "mike"}, {"name": "piter"}]
},
{
"id":2,
"nested": [{"name": "maria"}, {"name": "anna"}]
},
]
};
https://jsfiddle.net/3nhb79qc/
I want to display it's like:

Answer 1

One solution is using span-method in Element UI Table
First, flat your data structure by using computed method:
computed: {
expandData() {
return this.tableData.reduce((a, c) => {
const arr = c.nested.map(item => ({
id: c.id,
name: item.name
}))
a = a.concat(arr)
return a
}, [])
}
},
then your data will become:
[
{
"id": 1,
"name": "mike"
},
{
"id": 1,
"name": "piter"
},
{
"id": 2,
"name": "maria"
},
{
"id": 2,
"name": "anna"
}
]
After that define objectSpanMethod and use it in el-table
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
Demo on jsfiddle