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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
详解Vue底部导航栏组件
May 02 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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的十大要点(上)
2009/02/04 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
基于php 随机数的深入理解
2013/06/05 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP时间处理类操作示例
2018/09/05 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Google韩国首页图标动画效果
2007/08/26 Javascript
详解JS函数重载
2014/12/04 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python内置加密模块用法解析
2019/11/25 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
护理专业自我鉴定
2014/01/30 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
商业活动邀请函
2014/02/04 职场文书
消防标语大全
2014/06/07 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
赔偿协议书
2015/01/27 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
获奖感言范文
2015/07/31 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL