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

前端之家收集整理的这篇文章主要介绍了vue.js element-ui tree树形控件改iview的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

实现原理

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

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

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

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

Box v-if="showCheckBox" :value="node.checked" :indeterminate="node.indeterminate" :disabled="!!node.disabled" @click.native.stop @on-change="handleCheckChange">

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

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

使用方法

必须安装iview

样式风格全部替换成了ivew

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

Vue.use(chuView)

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

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

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

原文链接:https://www.f2er.com/vue/32962.html

猜你在找的Vue相关文章