这次给大家带来element-ui功能替换ivew，element-ui功能替换ivew的注意事项有哪些，下面就是实战案例，一起来看一下。

实现原理

修改了element-ui源码，把源码里面的tree模块提取出来

然后修改element自带checkbox等组件为iview的checkbox，并且兼容方法

最后修改element样式，改为iview风格，自己也添加了一些样式

新的tree组件可以说是element的逻辑，iview的风格

<template> <p>  </p><p>   <span>     <icon></icon>   </span>   <checkbox></checkbox>   <span>   </span>   <node-content></node-content>  </p>  <collapse-transition>   <p>    <el-tree-node>    </el-tree-node>   </p>  </collapse-transition> </template>

修改handleCheckChange，因为iview的checkbox组件逻辑不同，函数的返回不一样，需要兼容

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

提取完成后的项目结构，以及封装成npm插件

使用方法

必须安装iview

样式风格全部替换成了ivew

功能全部按照element-ui原先一样

npm i chu-tree-iview

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

使用文档跟element-ui一模一样

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

怎样对vue.js+created进行使用

做出json与数组键值大小写转换