vue.js中element-uitree树形控件改iview的示例分析

这篇文章主要介绍了vue.js中element-ui tree树形控件改iview的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联-专业网站定制、快速模板网站建设、高性价比博罗网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式博罗网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖博罗地区。费用合理售后完善，十载实体公司更值得信赖。

element-ui组件的tree树形控件修改源码改为iview组件

实现原理

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

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

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

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

修改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)

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

感谢你能够认真阅读完这篇文章，希望小编分享的“vue.js中element-ui tree树形控件改iview的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!