elcuy
436
3
Vue

Hierarchical tables with Vue

Posted 3 years ago by elcuy

Hello everyone! I need to display some tree structures on an application I'm working on. The sample data would be something like this:

Category 1
       - Subcategory 1.1
                - Subcategory 1.1.1:     5 items
                - Subcategory 1.1.2:     6 items
       - Subcategory 1.2
                - Subcategory 1.2.1:     2 items
Category 2
       - Subcategory 2.1
                - Subcategory 2.2.1:     5 items
                - Subcategory 2.2.2:     6 items
                - Subcategory 2.2.3:     5 items
                - Subcategory 2.2.4:     6 items

So I need to put this on a table for which i need to alter the rowspan on the parent groups. The thing is that I have no idea how to do that with Vuejs. I tried with v-for structures on the three levels, but I'm seriously lost. Has anyone done something similar with Vue? Final table should look like this

-------------------------------------------------------------------------------
| Category 1|Subcategory 1.1|Subcategory 1.1.1 | 5 items
|           |               |Subcategory 1.1.2 | 6 items
|           |------------------------------------------------------------------
|           |Subcategory 1.2|Subcategory 1.2.1 | 5 items
-------------------------------------------------------------------------------
| Category 2|Subcategory 2.1|Subcategory 2.1.1 | 5 items
|           |               |Subcategory 2.1.2 | 8 items
|           |------------------------------------------------------------------
|           |Subcategory 2.2|Subcategory 2.2.1 | 3 items
|           |------------------------------------------------------------------
|           |Subcategory 2.3|Subcategory 2.3.1 | 3 items
|           |               |Subcategory 2.3.2 | 8 items
-------------------------------------------------------------------------------

// And so on...

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.