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

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>

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);
   },

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

import chuView from 'chu-tree-iview'

Vue.use(chuView)

<chu-tree></chu-tree>

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!