Detaillierte Erläuterung der Schritte zum Ändern von iview mit der Baumsteuerung vue.js+element-ui

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Ändern von iview mit der Baumsteuerung vue.js+element-ui geben. Was sind die Vorsichtsmaßnahmen zum Ändern von iview mit vue.js+element-ui? Baumsteuerung wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Ändern Sie den Quellcode der Baumsteuerung der Element-UI-Komponente zur iView-Komponente

Implementierungsprinzip

Ändern Sie den Element-UI-Quellcode und Ändern Sie den Quellcode. Extrahieren Sie das Baummodul darin

und ändern Sie dann das eigene Kontrollkästchen des Elements und andere Komponenten in das Kontrollkästchen von iview und die kompatible Methode

Ändern Sie schließlich den Elementstil in den iview-Stil und auch füge selbst einige Stile hinzu

Man kann sagen, dass die neue Baumkomponente die Logik des Elements und der Stil von iview ist

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

HandleCheckChange ändern, da die Logik der Kontrollkästchenkomponente von iview anders ist, und die Rückgabe der Funktion ist unterschiedlich, sie muss kompatibel sein

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

Extrahieren Sie die fertige Projektstruktur und packen Sie sie in ein npm-Plug-in

Verwendung

Muss iview installiert sein

Stile wurden alle durch ivew ersetzt

Die Funktionen sind alle die gleichen wie bei element-ui

npm i chu-tree-iview

import chuView from 'chu-tree-iview'
Vue.use(chuView)
<chu-tree></chu-tree>

Die Nutzungsdokumentation ist genau die gleiche wie bei element-ui

http://element-cn.eleme.io/#/zh-CN/component/tree

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere php-chinesische Websites. Verwandte Artikel!

Empfohlene Lektüre:

Yuansheng JS implementiert Datei-Drag-Ereignis

Detaillierte Erläuterung der Verwendung globaler lokaler Vue-Komponenten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Ändern von iview mit der Baumsteuerung vue.js+element-ui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!