Heim >Web-Frontend >js-Tutorial >So bedienen Sie die Element-UI-Baumbaumsteuerung von vue.js, um iview zu ändern
Dieses Mal zeige ich Ihnen, wie Sie die Element-UI-Baumstruktursteuerung von vue.js in iview ändern und welche Vorsichtsmaßnahmen es gibt, um die Element-UI-Baumstruktursteuerung von vue.js zu ändern iview, wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.
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="{ '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>
Ä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 seinhandleCheckChange(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
import chuView from 'chu-tree-iview' Vue.use(chuView) <chu-tree></chu-tree>
Die Nutzungsdokumentation ist genau die gleiche wie 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:
So verwenden Sie die Vue-Dateibaumkomponente
So verwenden Sie JS EventEmitter
Das obige ist der detaillierte Inhalt vonSo bedienen Sie die Element-UI-Baumbaumsteuerung von vue.js, um iview zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!