Schrittanweisungen zum Ändern von iview mit Baumsteuerung

Dieses Mal bringe ich Ihnen die Schritt-für-Schritt-Anleitung zum Ändern von iview mit Baumsteuerung. Was sind die Vorsichtsmaßnahmen zum Ändern von iview mit Baumsteuerung .

Implementierungsprinzip

Der Element-UI-Quellcode wurde geändert und das Baummodul im Quellcode extrahiert.

Dann wurden das Kontrollkästchen und andere Komponenten geändert kommen mit Element als Kontrollkästchen von iview und kompatibler Methode

Endlich den Elementstil geändert, in iview-Stil geändert und selbst einige Stile hinzugefügt

Man kann sagen, dass die neue Baumkomponente die ist Logik des Elements und 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 sein muss. Sie muss mit der Projektstruktur nach

kompatibel sein

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

wurde extrahiert und in ein NPM-Plugin gepackt

Gebrauchsanweisung

iview muss installiert sein

Die Stile werden alle durch ivew ersetzt

Die Funktionen stimmen alle mit Element überein. Die Benutzeroberfläche ist die gleiche wie zuvor

npm i chu-tree-iview

rrree

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue implementiert Suchlisteninhalte

Axios sendet eine Post-Anfrage, um das Bildformular Schritt für Schritt einzureichen Schrittdetails

Das obige ist der detaillierte Inhalt vonSchrittanweisungen zum Ändern von iview mit Baumsteuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!