网站建设资讯

NEWS

网站建设资讯

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插件

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

使用方法

必须安装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的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前题目:vue.js中element-uitree树形控件改iview的示例分析
链接URL:http://njwzjz.com/article/ijojii.html