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="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }"> <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
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!