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 ?

You should take a look into how element.eleme.io/#/en-US/component/tree are doing it, it should be similar. — aks
– aks, Commented Mar 29, 2017 at 19:53
Thanks :), but they don't render table, so they don't have this problem. The problem with table is that you can't wrap <tr> elements by <div>'s for example — Alexander
– Alexander, Commented Mar 30, 2017 at 9:37

Alexander · Accepted Answer · 2017-05-21 18:11:01Z

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).

answered May 21, 2017 at 18:11

Alexander

7,8844 gold badges56 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Vue.js 2 - rendering sub rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related