Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-05-08 09:42:24
original
3452 Les gens l'ont consulté

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>
Copier après la connexion

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);
   },
Copier après la connexion
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
Copier après la connexion
import chuView from 'chu-tree-iview'
Vue.use(chuView)
<chu-tree></chu-tree>
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!