Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen

Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen

1. Ergebnisse erzielen

Rendern

2. Implementierungscode

Das Hinzufügen gepunkteter Linien zum Baumsteuerelement wird hauptsächlich durch die Steuerung von CSS erreicht, und die Einrückungsnummer des Baumsteuerelements kann nur 0 sein, also sei class="mytree"

   <div Klasse="meinBaum">
          <!--Einzug kann nur 0 sein-->
          <el-Baum
              :data="Baumdaten"
              :props="StandardProps"
              @node-click="Klick auf Knoten handhaben"
              Einzug="0"
              :render-content="Renderinhalt"
          ></el-Baum>
   </div>

Das CSS wird auf den folgenden Code gesetzt, wobei ::v-deep für die Stildurchdringung verwendet wird

<style lang="scss" scoped>
::v-tief .meinBaum {
  .el-tree > .el-tree-node:nach {
    oberer Rand: keiner;
  }
  .el-Baumknoten {
    Position: relativ;
    Polsterung links: 16px;
  }
  // Zwischen den Knoten besteht eine Lücke. Blenden Sie einfach die Schaltfläche „Erweitern“ aus. Wenn Sie der Meinung sind, dass die Lücke in Ordnung ist, können Sie sie löschen.el-tree-node__expand-icon.is-leaf{
    Anzeige: keine;
  }
  .el-tree-node__children {
    Polsterung links: 16px;
  }
  .el-tree-node :letztes-Kind:vor {
    Höhe: 38px;
  }
  .el-tree > .el-tree-node:vor {
    Rand links: keiner;
  }
  .el-tree > .el-tree-node:nach {
    oberer Rand: keiner;
  }
  .el-tree-node:vor {
    Inhalt: "";
    links: -4px;
    Position: absolut;
    rechts: auto;
    Rahmenbreite: 1px;
  }
  .el-tree-node:nach {
    Inhalt: "";
    links: -4px;
    Position: absolut;
    rechts: auto;
    Rahmenbreite: 1px;
  }
  .el-tree-node:vor {
    Rahmen links: 1px gestrichelt #4386c6;
    unten: 0px;
    Höhe: 100%;
    oben: -26px;
    Breite: 1px;
  }
  .el-tree-node:nach {
    Rahmen oben: 1px gestrichelt #4386c6;
    Höhe: 20px;
    oben: 12px;
    Breite: 24px;
  }
}
</Stil>

3. Andere Implementierungen

Vue implementiert Baumtabelle durch Elementbaumsteuerung

Element-ui implementiert das Hinzufügen von Symbolen zu Baumsteuerungsknoten

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Vue implementiert Baumtabelle durch Elementbaumsteuerung
  • Vue Element-ui-Tabelle realisiert Baumstrukturtabelle
  • Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI
  • Vue+Element-UI realisiert Baumtabelle
  • Vue+Element UI-Baumsteuerung integriert Dropdown-Funktionsmenü (Baum + Dropdown + Eingabe)
  • Vue Element-ui implementiert Baumsteuerungsknoten und fügt Symbole hinzu, detaillierte Erläuterung

<<:  Wie verstecke ich einen bestimmten Text in HTML?

>>:  Codebeispiel zum Erreichen des internen Ankerpunkts einer Webseite durch reines CSS beim Auf- und Ab-Offset

Artikel empfehlen

Natives JS zur Implementierung der Formularvalidierungsfunktion

Inhaltsverzeichnis Bei der Entwicklung kann eine ...

Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare

Die gebräuchlichste, am häufigsten verwendete und ...

Lösung, wenn Docker plötzlich vom externen Netzwerk nicht mehr erreichbar ist

Nach den Methoden der Meister wurde die Ursache g...

Detailliertes Tutorial zum verteilten Betrieb von JMeter in der Docker-Umgebung

1. Erstellen Sie das Basisimage von jmeter Das Do...

Lösen Sie das Problem der Containerverwaltung mit Docker Compose

Im Docker-Design führt ein Container nur eine Anw...

Detaillierte Erläuterung der Nginx-Rewrite-Jump-Anwendungsszenarien

Anwendungsszenario 1: Domänennamenbasierte Umleit...

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...

Detaillierte Erklärung der Verwendung von Nginx proxy_redirect

Heute bin ich auf ein kleines Problem gestoßen, a...

Verkürzen Sie die Seiten-Rendering-Zeit, damit die Seite schneller läuft

Wie kann die Seiten-Rendering-Zeit im Browser so ...

Das WeChat-Applet wählt die Bildsteuerung

In diesem Artikelbeispiel wird der spezifische Co...

Webdesign-Tutorial (1): Schritte und Gesamtlayout

<br /> Hinweis: Alle Texte, mit Ausnahme der...

Konfigurieren Sie nginx so, dass es zur Systemwartungsseite umleitet

Letztes Wochenende bereitete sich ein Bruderproje...

Detaillierter Prozess zur Konfiguration von NIS in Centos7

Inhaltsverzeichnis Prinzip Vorbereitung der Netzw...

Lösung zum Vergessen des MySQL-Datenbankkennworts unter MAC

Schnelle Lösung zum Vergessen des MySQL-Datenbank...