vue.js element-ui tree树形控件改iview的方法


Posted in Javascript onMarch 29, 2018

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

实现原理

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

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

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

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

<template>
 <div
  @click.stop="handleClick"
  v-show="node.visible">
  <div class="chu-tree-node__content"
   :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
   <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>
  </div>
  <collapse-transition>
   <div
    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>
   </div>
  </collapse-transition>
 </div>
</template>

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

<chu-tree></chu-tree>

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

http://element-cn.eleme.io/#/zh-CN/component/tree

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
学习ExtJS border布局
Oct 08 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 #Javascript
vue 实现全选全不选的示例代码
Mar 29 #Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
使用vue2实现购物车和地址选配功能
Mar 29 #Javascript
vue axios请求拦截实例代码
Mar 29 #Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 #Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
You might like
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
解密效果
2006/06/23 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python实现多属性排序的方法
2018/12/05 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
实习生自荐信范文
2013/11/13 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
软件项目实施计划书
2014/05/02 职场文书
宣传活动总结范文
2014/07/01 职场文书
在职证明书模板
2015/06/15 职场文书
小数乘法教学反思
2016/02/22 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript