vue.js - 使用 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

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

Answer 1

考虑使用 CSS Grid 构建表格。您可以有条件地分配 CSS 规则 ( :class ) 以逐步缩进。例如 .level__2 { margin-left: 24px;}