Comment le contrôle d'arborescence élément-ui de vue.js modifie iview

Cette fois, je vais vous montrer comment modifier iview avec le contrôle d'arborescence élément-ui de vue.js. Quelles sont les précautions pour modifier iview avec le contrôle d'arborescence élément-ui de vue.js. le combat réel Jetons un coup d’œil au cas. z

Principe d'implémentation

Modification du code source de l'élément-ui, extraction du module d'arborescence dans le code source

puis modification de la propre case à cocher de l'élément et autres composants C'est la case à cocher d'iview et est compatible avec la méthode

Enfin, j'ai modifié le style de l'élément et je l'ai changé en style iview J'ai également ajouté quelques styles moi-même

Le nouveau composant arborescent peut être. dit être la logique de l'élément et le style d'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>

Modifier handleCheckChange car la logique du composant case à cocher d'iview est différente et le retour de la fonction est différent Il doit être compatible avec le

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

structure du projet extraite et emballée dans un plug-in npm

Comment utiliser

Doit installer iview

Les styles de style sont tous remplacés par ivew

Toutes les fonctions sont les mêmes que celles d'element-ui

npm i chu-tree-iview

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

La documentation d'utilisation est exactement la même que celle d'element -ui

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des choses plus excitantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Html interdit la fonction de copie par clic droit

Explication détaillée des étapes pour implémenter le glisser-déposer de fichiers et déposer en JS (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!