2016-04-25 11 views
2

Ich muss einige Baumstrukturen in einer Anwendung anzeigen, an der ich arbeite. Die Beispieldaten wäre so etwas wie dieses:Hierarchische Tabellen mit 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 

Also muss ich auf einem Tisch diese setzen, für die ich brauche die rowspan auf den übergeordneten Gruppen zu ändern. Die Sache ist, dass ich keine Ahnung habe, wie ich das mit Vuejs machen soll. Ich habe versucht mit v-for-Strukturen auf den drei Ebenen, aber ich bin ernsthaft verloren. Hat jemand etwas Ähnliches mit Vue gemacht?

+0

Es ist nicht klar, wie Sie eine solche Tabelle zeichnen würden. Können Sie eine Beispieltabelle in ASCII erstellen? Verwenden Sie etwas wie Monodraw oder ASCIIflow? – gurghet

+0

Sie können dieses Beispiel überprüfen: http://vuejs.org/examples/tree-view.html – Nora

+0

Auf einer Tabelle, selbst mit verschachtelten Daten, stieß ich auf Probleme mit dem Öffnen und Schließen der Tags und der v-for. Es könnte also nicht möglich sein, dies mit einer Tabelle zu tun. Andere Strukturen könnten möglich sein (wobei jede Ebene ein anderes Tag, div, span usw. verwendet). –

Antwort

1

Verwenden Sie CSS Grid zum Erstellen der Tabelle. Sie können CSS-Regeln (: class) bedingungslos zuweisen, um sie schrittweise einzurücken. Zum Beispiel .level__2 {margin-left: 24px;}