带有 vuejs 的分层表答案

【问题标题】：Hierarchical tables with vuejs带有 vuejs 的分层表
【发布时间】：2016-04-25 21:57:19
【问题描述】：

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

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 做过类似的事情吗？

【问题讨论】：

不清楚如何绘制这样的表格。你能用ASCII制作一个样本表吗？使用 Monodraw 或 ASCIIflow 之类的东西？
你可以看看这个例子：vuejs.org/examples/tree-view.html
在表格上，即使有嵌套数据，我也遇到了标签和 v-for 的打开和关闭问题。因此，使用表格可能无法做到这一点。其他结构可能是可能的（每个级别使用不同的标签、div、span 等）。

标签： vue.js

【解决方案1】：

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

【讨论】：