Level 37
Vuejs has an example of a tree structure
Apr 25, 2016
3
Level 2
Hierarchical tables with Vue
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...
Level 2
I didn't test it, but it should work with Bootstrap css
<div
v-for="Category in categoriesArray"
class="col-xs-12">
<div class="col-xs-2">
Category {{ category.id }}
</div>
<div class="col-xs-10">
<div
v-for="Subcategory in Category.subCategoriesArray"
class="col-xs-12"
>
<div class="col-xs-4">
Subcategory {{Category.id + '.'+subCategory.id}}
</div>
<div class="col-xs-8">
<div
v-for="Subcategory2 in Subcategory.subCategoriesArray"
class="col-xs-12"
>
Subcategory {{Category.id+'.'+Subcategory.id+'.'+Subcategory2.id}}
|
{{Subcategory2.numberItems}} items
</div>
</div>
</div>
</div>
</div>
Level 1
Did you ever figure this out with HTML table markup? I'm trying to do something very similar and would be cool to see an example.
The main problem I see is that in an HTML table the children probably wouldn't be outputted as child HTML elements, they would be sibling rows with a different template that just come after the parents.
Please or to participate in this conversation.