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

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

亚连
Libérer: 2018-05-29 15:12:06
original
2412 Les gens l'ont consulté

Cet article présente principalement la méthode de modification du contrôle d'arborescence élément-ui vue.js en iview. Je vais maintenant le partager avec vous et vous donner une référence.

Le code source du contrôle arborescence du composant element-ui a été modifié en composant iview

Principe d'implémentation

Modifié le code source de l'élément-ui, extrayez le module d'arborescence du code source

, puis modifiez la propre case à cocher de l'élément et les autres composants avec la case à cocher d'iview et la méthode compatible

Enfin, modifiez le style de l'élément en style iview, j'ai également ajouté quelques styles

Le nouveau composant arborescent peut être considéré comme la logique de l'élément, le style iview

<template>
 <p
  @click.stop="handleClick"
  v-show="node.visible">
  <p class="chu-tree-node__content"
   :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, la fonction Les retours sont différents et doivent être compatibles avec la structure du projet après que

handleCheckChange(ev) {
    this.node.setChecked(ev, !this.tree.checkStrictly);
   },
Copier après la connexion

soit extrait et empaqueté dans un plug-in npm

Méthode d'utilisation

iview doit être installé

Tous les styles ont été remplacés par ivew

Le les fonctions sont toutes les mêmes que element-ui

npm i chu-tree-iview
Copier après la connexion
import chuView from &#39;chu-tree-iview&#39;

Vue.use(chuView)

<chu-tree></chu-tree>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Méthode JS pour trouver le plus grand élément dans un tableau de type Number

répertoire de structure de projet vuex et quelques configurations simples Introduction

Explication détaillée de la différence entre les fichiers de ressources vue2.0 et les actifs statiques

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!