Step instructions for modifying iview with tree control

This time I will bring you the step-by-step instructions for modifying the iview with the tree control. What are the precautions for modifying the iview with the tree control? The following is a practical case, let's take a look.

Implementation principle

Modified the element-ui source code, extracted the tree module in the source code

Then modified the checkbox and other components that come with element as Checkbox of iview, and compatible method

Finally modified the element style, changed it to iview style, and added some styles myself

The new tree component can be said to be the logic of element and 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 with

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

The project structure after extraction is completed, and encapsulated into an npm plug-in

How to use

Must install iview

All styles are replaced with ivew

The functions are all in accordance with element- The ui is the same as before

npm i chu-tree-iview

import chuView from 'chu-tree-iview'
Vue.use(chuView)
<chu-tree></chu-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:

Vue implements search list content

##axios sends a post request to submit the image form step-by-step explanation

The above is the detailed content of Step instructions for modifying iview with tree control. For more information, please follow other related articles on the PHP Chinese website!