Home > Article > Web Front-end > How to change vue.js element-ui tree tree control to iview
This article mainly introduces the method of changing the vue.js element-ui tree tree control to iview. Now I will share it with you and give you a reference.
The tree tree control of the element-ui component has modified the source code and changed it to the iview component
Implementation principle
Modified the element-ui source code , extract the tree module from the source code
Then modify the element's own checkbox and other components to iview's checkbox, and make it compatible with the method
Finally modify the element style to iview style, I also added some styles myself
The new tree component can be said to be the logic of element, the style of 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>
Modify handleCheckChange, because the logic of iview's checkbox component is different, the return of the function Different, it needs to be compatible with
handleCheckChange(ev) { this.node.setChecked(ev, !this.tree.checkStrictly); },
after extracting the project structure, and encapsulating it into an npm plug-in
Usage method
Must install iview
All styles are replaced with ivew
The functions are all the same as element-ui originally
npm i chu-tree-iviewrrree
The above is what I compiled for everyone , I hope it will be helpful to everyone in the future.
Related articles:
JS method to find the largest element in a Number type array
vuex project structure directory and some simple configurations Introduction
detailed explanation of the difference between assets and static in vue2.0 resource files
The above is the detailed content of How to change vue.js element-ui tree tree control to iview. For more information, please follow other related articles on the PHP Chinese website!