Step instructions for modifying iview with tree control-JS Tutorial-php.cn

Step instructions for modifying iview with tree control

php中世界最好的语言

Release： 2018-05-11 13:41:11

Original

3864 people have browsed it

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>

Copy after login

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);
   },

Copy after login

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

Copy after login

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

Copy after login

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!