Detailed explanation of steps to modify iview with vue.js+element-ui tree control

This time I will bring you a detailed explanation of the steps for modifying iview with vue.js element-ui tree control. What are the precautions for modifying iview with vue.js element-ui tree control? Here is the actual combat Let’s take a look at the case.

The tree tree control of element-ui component modified the source code to iview component

Implementation principle

Modified the element-ui source code and changed the source code Extract the tree module inside

Then modify the element's own checkbox and other components to iview's checkbox, and the compatible method

Finally modify the element style to iview style, and also add 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-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>

Modify handleCheckChange, because the logic of iview's checkbox component is different and the return of the function is different, it needs to be compatible

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

Extract the completed project structure and encapsulate it into an npm plug-in

Usage method

iview must be installed

Styles have all been replaced with ivew

The functions are all the same as element-ui

npm i chu-tree-iview

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

The usage documents are exactly the same as element-ui

http://element- cn.eleme.io/#/zh-CN/component/tree

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Yuansheng JS implements file drag and drop events

Detailed explanation of the use of vue global local components

The above is the detailed content of Detailed explanation of steps to modify iview with vue.js+element-ui tree control. For more information, please follow other related articles on the PHP Chinese website!