Explication détaillée des étapes pour modifier iview avec le contrôle d'arborescence vue.js+element-ui

Cette fois, je vais vous apporter une explication détaillée des étapes de modification d'iview avec le contrôle d'arborescence vue.js+element-ui Quelles sont les précautions pour modifier iview avec vue.js+element-ui. contrôle des arbres, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Modifier le code source du contrôle arborescent du composant element-ui en composant iview

Principe d'implémentation

Modifier le code source de l'élément-ui et changer le code source Extrayez le module d'arborescence à l'intérieur de

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

Enfin, modifiez le style de l'élément en style iview, et également ajouter quelques styles moi-même

Le nouveau composant arborescence peut être considéré comme la logique de l'élément, 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, elle doit être compatible

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

Extraire la structure du projet terminée et la conditionner dans un plug-in npm

Comment utiliser

Doit être installé iview

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

Les fonctions sont toutes 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

http://element-cn.eleme.io/#/zh-CN/component/tree

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Yuansheng JS implémente l'événement de glissement de fichier

Explication détaillée de l'utilisation des composants locaux globaux de vue

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!