vue.js元素用户界面树树形控件改接口的方法

元素用户界面组件的树树形控件修改源码改为接口组件

实现原理

修改了元素用户界面源码，把源码里面的树模块提取出来

然后修改元素自带检验盒等组件为接口的复选框，并且兼容方法

最后修改元素样式，改为接口风格，自己也添加了一些样式

新的树组件可以说是元素的逻辑，iview的风格

模板div @ click。stop=' handleClick ' v-show='节点。visible ' div class=' Chu-tree-node _ _ content ' : style=' { ' padding-left ' :(node。1级)*树。缩进' px ' } ' span : class=' arrow CLaSS ' @ click。stop=' handleExpandIconClick ' Icon v-if='！节点。islaf ' type=' arrow-right-b '/Icon/span Checkbox v-if=' showCheckbox ' : value='节点。已选中“:了解=”节点。了解' :禁用='！节点。“已禁用”@单击。本地人。stop @ on-change=' handleCheckChange '/Checkbox span v-if='节点。正在加载' class=' ivu-load-loop '/span node-content : node=' node '/node-content/div折叠-过渡div-show=' expanded ' El-tree-node : render-content ' v-for=' node。子节点' :键='子'修改handleCheckChange，因为接口的检验盒组件逻辑不同，函数的返回不一样，需要兼容

handleCheckChange(ev){ this。节点。设置选中(ev，严格检查);},提取完成后的项目结构，以及封装成新公共管理插件

使用方法

必须安装接口

样式风格全部替换成了ivew

功能全部按照元素用户界面原先一样

NPM一世楚树维从“楚树维尤”Vue导入楚观。使用(楚视图)楚树/楚树使用文档跟元素用户界面一模一样

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。