Instructions pour modifier iview avec le contrôle d'arborescence

Cette fois, je vais vous apporter les instructions étape par étape pour modifier iview avec le contrôle d'arborescence. Quelles sont les précautions pour modifier iview avec le contrôle d'arborescence. Voici un cas pratique, jetons un coup d'oeil. .

Principe de mise en œuvre

Modification du code source de l'élément-ui et extraction du module arborescent dans le code source

Puis modification de la case à cocher et des autres composants qui livré avec l'élément comme case à cocher d'iview et méthode compatible

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

Le nouveau composant d'arborescence peut être considéré comme le logique de l'élément et 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>

Modifiez 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

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

.

après avoir extrait la structure du projet et l'avoir encapsulée dans un plug-in npm

Le mode d'emploi

iview doit être Les styles

installés sont tous remplacés par les fonctions ivew

Tout est identique à l'élément-ui d'origine

npm i chu-tree-iview

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

Je crois que vous maîtrisez la méthode après en lisant le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Vue implémente le contenu de la liste de recherche

Axios envoie une demande de publication pour soumettre le formulaire d'image étape par étape détails de l'étape

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!