Komplexe Layout-Struktur, Baum-Komponenten integriert Tabellen-Komponenten, jeder Knoten repräsentiert eine Zeile

Vorwort

Dieser Artikel beschreibt eine komplexere Typografie, eine Baumkomponente, die Tabellenkomponenten integriert, wobei jeder Knoten des Baumes eine Zeile konfiguriert hat.
Die Produktvergleichseite lautet wie folgt:

Anforderungsanalyse

Wenn wir uns diese Seite anschauen, ist das erste, was uns einfällt, eine Baumkomponente und eine Tabellekomponente.
Wenn Sie die rechte Seite als Tabelle-Komponente sitzen wollen, ist es eher kopiert. Da es sich um die Falten des Baumes handelt, muss auch die entsprechende Zeile falten.
Der einfachste Ansatz ist also, die Tabelle rechts zu simulieren und jede Zeile in einen Baumknoten zu schreiben. Wenn Sie den Knoten ausklappen, werden die entsprechenden Zeilen entsprechend ausklappen.

Code realisiert

Der oberste Header ist eine separate Div-Implementierung, die nach rechts verschoben ist.

<div class="top-header">
  <div class="col-item">
    Row count
  </div>
  <div class="col-item">
    Column count
  </div>
  <div class="col-item">
    Custom SQL
  </div>
  <div class="col-item">
    Freshness
  </div>
  <div class="col-item">
    Cardinality
  </div>
  <div class="col-item">
    Uniqueness
  </div>
  <div class="col-item">
    Nullness
  </div>
  <div class="col-item">
    Distribution
  </div>
</div>

Der Baum auf der linken Seite wird mit der Baumkomponente von element-plus dargestellt.
Jeder Knoten sollte ein Schlitz verwenden, um eine Menge Logik einzeln zu verarbeiten, wie z. B. verschiedene Symbole für verschiedene Ebenen.
Die Anzahl der Zellen pro Knoten kann einzeln festgelegt werden.
Die Anzahl der Zellen wird mit CSS-Klassen implementiert, die nicht auf Zellen klicken können, die Hintergrundfarbe ist auf transparent oder mit der Hintergrundfarbe ist auf übereinstimmen.
Ob jede Zelle angezeigt wird oder nicht und welche Farbe angezeigt wird, hängt von den Daten und dem Zelltyp des Knoten ab.
Wenn Sie also die CSS-Klasse für eine Zelle erhalten, verwenden Sie die beiden Parameter Zelltyp1 und Node. Folgende
<div :class="showCell(1, node)" class="node-rules-cell" />

sind besonders zu beachten:
Der Baum hat verschiedene Ebenen, wobei jede Stufe in unterschiedlicher Entfernung nach rechts zurückgeht. Um die Breite des Buchknoten zu erreichen, beeinflusst die Typografie der nachfolgenden Zellen nicht.
Wir müssen das Ende der Baumknoten ausrichten, die Breite aller Knoten verschiedener Ebenen ist nicht gleich.
Wir können so schreiben.

@levMargin: 16px;
.node-info {
  width: 340px;
  margin-right: 12px;
  &.node-lev2{
    width: calc(340px - @levMargin) ;
  }
  &.node-lev3{
    width: calc(340px - @levMargin * 2) ;
  }
  &.node-lev4{
    width: calc(340px - @levMargin * 3) ;
  }
}

Die Breite des Knoten der ersten Stufe beträgt 340px, die Breite des Knoten der zweiten Stufe beträgt 340 - 16 und die Breite des Knoten der dritten Stufe beträgt 340 - 16 * 2. Analog zu diesem.

Einige der Details sind, die wir tun müssen, um einige Optimierungen für den Knoten, wenn Hover, Fokus.

.el-tree-node__content:hover .node-rules{
  background-color: #fff;
}
.el-tree-node:focus>.el-tree-node__content .node-rules{
  background-color: #fff;
}

Wirkung demonstrieren