Cette fois, je vais vous montrer comment modifier iview avec le contrôle d'arborescence élément-ui de vue.js. Quelles sont les précautions pour modifier iview avec le contrôle d'arborescence élément-ui de vue.js. le combat réel Jetons un coup d’œil au cas. z
Principe d'implémentation
Modification du code source de l'élément-ui, extraction du module d'arborescence dans le code source
puis modification de la propre case à cocher de l'élément et autres composants C'est la case à cocher d'iview et est compatible avec la méthode
Enfin, j'ai modifié le style de l'élément et je l'ai changé en style iview J'ai également ajouté quelques styles moi-même
Le nouveau composant arborescent peut être. dit être la logique de l'élément et le style d'iview
<template> <p @click.stop="handleClick" v-show="node.visible"> <p class="chu-tree-nodecontent" :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 et le retour de la fonction est différent Il doit être compatible avec le
handleCheckChange(ev) { this.node.setChecked(ev, !this.tree.checkStrictly); },
Comment utiliser
Doit installer iviewLes styles de style sont tous remplacés par ivew Toutes les fonctions sont les mêmes que celles d'element-uinpm i chu-tree-iview
import chuView from 'chu-tree-iview' Vue.use(chuView) <chu-tree></chu-tree>
Html interdit la fonction de copie par clic droit
Explication détaillée des étapes pour implémenter le glisser-déposer de fichiers et déposer en JS (avec code)
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!