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="{ &#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>

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-iview

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!