Wie die Element-UI-Baumbaumsteuerung von vue.js iview ändert

Dieses Mal zeige ich Ihnen, wie Sie iview mit der Element-UI-Baumsteuerung von vue.js ändern der eigentliche Kampf Werfen wir einen Blick auf den Fall. z

Implementierungsprinzip

Änderte den Element-UI-Quellcode, extrahierte das Baummodul im Quellcode

und änderte dann das eigene Kontrollkästchen des Elements und Andere Komponenten Es handelt sich um das Kontrollkästchen von iview und ist mit der Methode kompatibel.

Schließlich habe ich den Elementstil geändert und ihn in den iview-Stil geändert.

Die neue Baumkomponente kann sein Angeblich ist die Logik des Elements und der Stil von iview

<template>
 <p
  @click.stop="handleClick"
  v-show="node.visible">
  <p class="chu-tree-nodecontent"
   :style="{ &#39;padding-left&#39;: (node.level - 1) * tree.indent + &#39;px&#39; }">
   <span :class="arrowClasses" @click.stop="handleExpandIconClick">
     <Icon v-if="!node.isLeaf" type="arrow-right-b"></Icon>
   </span>
   <Checkbox
    v-if="showCheckbox"
    :value="node.checked"
    :indeterminate="node.indeterminate"
    :disabled="!!node.disabled"
    @click.native.stop
    @on-change="handleCheckChange"></Checkbox>
   <span
    v-if="node.loading"
    class="ivu-load-loop">
   </span>
   <node-content :node="node"></node-content>
  </p>
  <collapse-transition>
   <p
    v-show="expanded">
    <el-tree-node
     :render-content="renderContent"
     v-for="child in node.childNodes"
     :key="getNodeKey(child)"
     :node="child"
     @node-expand="handleChildNodeExpand">
    </el-tree-node>
   </p>
  </collapse-transition>
 </p>
</template>

Ändern Sie handleCheckChange, da die Logik der Kontrollkästchenkomponente von iview unterschiedlich ist und die Rückgabe der Funktion unterschiedlich ist. Sie muss danach mit der Projektstruktur kompatibel sein

handleCheckChange(ev) {
    this.node.setChecked(ev, !this.tree.checkStrictly);
   },

wurde extrahiert und in ein NPM-Plugin gepackt

Gebrauchsanweisung

iview muss installiert werden

Die Stile werden alle durch ivew ersetzt

Die Funktionen stimmen alle mit element -ui überein und sind die gleichen wie zuvor

npm i chu-tree-iview

rrree

Die Verwendungsdokumentation ist genau die gleiche als element-ui

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Html verbietet die Funktion zum Kopieren mit der rechten Maustaste

Ausführliche Erläuterung der Schritte zum Implementieren von Datei-Drag and Drop in JS (mit Code)

Das obige ist der detaillierte Inhalt vonWie die Element-UI-Baumbaumsteuerung von vue.js iview ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!