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

   <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>

<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>