如何操作vue.js element-ui tree树形控件改iview

这次给大家带来如何操作vue.js element-ui tree树形控件改iview,操作vue.js 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 EventEmitter

以上就是如何操作vue.js element-ui tree树形控件改iview的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2756589.html

(0)
上一篇 2025年3月8日 07:40:41
下一篇 2025年3月8日 07:40:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS面试注意点

    这次给大家带来JS面试注意点,JS面试注意的注意事项有哪些,下面就是实战案例,一起来看一下。 1.前言 这段时间,金三银四,很多人面试,很多人分享面试题。在前段时间,我也临时担任面试官,为了大概了解面试者的水平,我也写了一份题目,面试了几个…

    2025年3月8日 编程技术
    200
  • JS的new()底层逻辑详解

    这次给大家带来JS的new()底层逻辑详解,JS的new()使用注意事项有哪些,下面就是实战案例,一起来看一下。 前言 和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存…

    2025年3月8日
    200
  • 怎样使用AngularJS内$http服务Post方法传递json参数

    这次给大家带来怎样使用AngularJS内$http服务Post方法传递json参数,使用AngularJS内$http服务Post方法传递json参数的注意事项有哪些,下面就是实战案例,一起来看一下。 具体如下: 一、$http POST…

    2025年3月8日
    200
  • 怎样利用JS获取url参数发送json格式的POST请求

    这次给大家带来怎样利用JS获取url参数发送json格式的POST请求,利用JS获取url参数发送json格式的POST请求的注意事项有哪些,下面就是实战案例,一起来看一下。 登录后复制 一、获取url所有参数值 function US()…

    编程技术 2025年3月8日
    200
  • 怎么使用spirngmvc js传递复杂json参数到controller

    这次给大家带来怎么使用spirngmvc js传递复杂json参数到controller,使用spirngmvc js传递复杂json参数到controller的注意事项有哪些,下面就是实战案例,一起来看一下。 Spring MVC在接收集…

    编程技术 2025年3月8日
    200
  • 怎么使用js传递数组参数到后台controller

    这次给大家带来怎么使用js传递数组参数到后台controller,使用js传递数组参数到后台controller的注意事项有哪些,下面就是实战案例,一起来看一下。 传递参数传递字符串,所以要把数组转换为字符串, var arr=[1,23,…

    编程技术 2025年3月8日
    200
  • 利用Vue.js做出可配置登录表单

    这次给大家带来利用Vue.js做出可配置登录表单,利用Vue.js做出可配置登录表单的注意事项有哪些,下面就是实战案例,一起来看一下。 业务场景 在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录,有…

    2025年3月8日
    200
  • 怎样做出JS中E-mail 地址格式验证

    这次给大家带来怎样做出JS中E-mail 地址格式验证,做出JS中E-mail 地址格式验证的注意事项有哪些,下面就是实战案例,一起来看一下。 1:代码 利用JavaScript验证是否符合电子邮箱地址 // 创建第一个函数validate…

    2025年3月8日
    200
  • 如何利用JS分时函数进行性能优化

    这次给大家带来如何利用JS分时函数进行性能优化,利用JS分时函数进行性能优化的注意事项有哪些,下面就是实战案例,一起来看一下。 分时函数和函数节流的问题不一样,函数节流针对的事件不是用户主动调用的,前面已经提过了。 函数节流的原理是:延迟当…

    编程技术 2025年3月8日
    200
  • 怎样使用VUE对element-ui内ElTableColumn扩展

    这次给大家带来怎样使用VUE对element-ui内ElTableColumn扩展,使用VUE对element-ui内ElTableColumn扩展的注意事项有哪些,下面就是实战案例,一起来看一下。 公司有一个新的需求,点击ElTableC…

    2025年3月8日
    200

发表回复

登录后才能评论