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

感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!

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

实现原理

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

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

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

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

代码如下:

@click.stop="handleClick"

v-show="node.visible">

:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">

v-if="showCheckbox"

:value="node.checked"

:indeterminate="node.indeterminate"

:disabled="!!node.disabled"

@click.native.stop

@on-change="handleCheckChange">

v-if="node.loading"

class="ivu-load-loop">

v-show="expanded">

:render-content="renderContent"

v-for="child in node.childNodes"

:key="getNodeKey(child)"

:node="child"

@node-expand="handleChildNodeExpand">

修改handleCheckChange,因为iview的checkbox组件逻辑不同,函数的返回不一样,需要兼容

代码如下:

handleCheckChange(ev) {

this.node.setChecked(ev, !this.tree.checkStrictly);

},

提取完成后的项目结构,以及封装成npm插件

【图片暂缺】

使用方法

必须安装iview

样式风格全部替换成了ivew

功能全部按照element-ui原先一样

代码如下:

npm i chu-tree-iview

代码如下:

import chuView from 'chu-tree-iview'

Vue.use(chuView)

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持512笔记。

注:关于vue.js element-ui tree树形控件改iview的方法的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

关键词:vue.js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值