How vue.js element-ui tree tree control modifies iview

This time I will show you how to modify iview with vue.js element-ui tree tree control, and how to modify iview with vue.js element-ui tree tree control. What are the precautions?, here is the actual combat Let’s take a look at the case. z

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 It is the checkbox of iview and is compatible with the method

Finally modified the element style and changed it to iview style. I also 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 the checkbox component of iview 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);
   },

after the extraction is completed, and the project structure is packaged into an npm plug-in

How to use

Must install iview

All styles are replaced with ivew

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

npm i chu-tree-iview

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

The usage documentation is exactly the same as element-ui

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:

Html prohibits right-click copy function

Detailed explanation of the steps to implement file drag and drop in JS (with code)

The above is the detailed content of How vue.js element-ui tree tree control modifies iview. For more information, please follow other related articles on the PHP Chinese website!