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="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
<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!
