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

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

php中世界最好的语言

Release： 2018-04-20 16:25:41

Original

5174 people have browsed it

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>

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

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

Copy after login

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

Copy after login

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

Copy after login

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!