Vue.js 2 - rendering sub rows

Question

I want to build a vue.js2 component to represent the following data in tree-grid (with expand/collapse functionality for sub-rows):

{
    "a1": {
        "values": { "cost": 3, "revenue": 5 },
        "subLevel": {
            "b1": {
                "metrics": { "cost": 3, "revenue": 5 },
                "subLevel": {
                    "c1": {
                        "metrics": { "cost": 1, "revenue": 3 },
                    },
                    "c2": {
                        "metrics": { "cost": 2, "revenue": 2 },
                    }
                }
            }
        },
    "a2": {
        "values": { "cost": 5, "revenue": 9 },
        "subLevel": {
            "b3": {
                "metrics": { "cost": 5, "revenue": 9 },
                "subLevel": {
                    "c3": {
                        "metrics": { "cost": 2, "revenue": 4},
                    },
                    "c4": {
                        "metrics": { "cost": 3, "revenue": 5},
                    }
                }
            }
        },
}

The way I would like to represent it is something like that (with collapse/expand on click on a parent row):

Domain  Geo  Browser  Cost  Revenue
 a1                    3       5
         b1            3       5
                c1     1       3
                c2     2       2
 a2                    5       9
         b3            5       9
                c3     2       4
                c4     3       5

The approach I thought of is to use recursive component that will render the current row TR and then will v-for over the subLevel rendering the children TRs.

The problem is that: - on the one hand in vue templates I can't have multiple nodes under node - on the other hand I can't wrap rows by any other html-node (e.g. div).

Also if I try to wrap them by another I of course get exception:

Cannot use as component root element because it may contain multiple nodes.

Any idea how could I develop this component to represent my data as tree-grid ?

Answer 1

Finally I implemented it using divs with display values: table, table-row, table-column.

This way I could use wrappers and still to enjoy table behavior (e.g. adjusting the cells to the content while preserving the same width for the cells of the same column without any java-script DOM manipulations).