Иерархические таблицы с vuejs


Мне нужно отобразить некоторые древовидные структуры в приложении, над которым я работаю. Примерные данные будут примерно такими:

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-для структур на трех уровнях, но я серьезно заблудился. Кто-нибудь делал что-то подобное с Вью?

1 2

1 ответ:

Рассмотрите возможность использования CSS Grid для построения таблицы. Можно условно присвоить CSS-правила (класс ), чтобы постепенно отступа. Например.level__2 { margin-left: 24px;}