具有vuejs的分层表

Question

我需要在我正在处理的应用程序上显示一些树形结构。样本数据将是这样的：

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

所以我需要把它放在一个表上，我需要改变父组的rowspan。问题是我不知道如何用Vuejs做到这一点。我尝试在三个级别上使用v-for结构，但我严重失败了。有没有人用Vue做过类似的事情？

Answer 1

考虑使用CSS Grid构建表。您可以有条件地指定CSS规则（：class）逐步缩进。例如.level__2 {margin-left：24px;}