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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
Augularjs-起步详解
Jul 08 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
python实现文本文件合并
2015/12/29 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python自动抢红包教程详解
2019/06/11 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python用input输入列表的实例代码
2020/02/07 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python实现爬取并分析电商评论
2020/06/19 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
SQL Server笔试题
2012/01/10 面试题
写自荐信三大法宝
2014/01/24 职场文书
高中军训感言400字
2014/02/24 职场文书
给公司的建议书范文
2014/05/13 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书