全国服务热线:4008-888-888

公司新闻

聊城小程序制作开发_vue.js element

vue.js element-ui tree树形控件改iview的方法       这篇文章主要介绍了vue.js element-ui tree树形控件改iview的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

 template 
 @click.stop="handleClick"
 v-show="node.visible" 
 div :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }" 
 span : @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"
 /span 
 node-content :node="node" /node-content 
 /div 
 colla凡科抠图e-transition 
 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 
 /colla凡科抠图e-transition 
 /div 
 /template 

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

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

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

使用方法

必须安装iview

样式风格全部替换成了ivew

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

npm i chu-tree-iview

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


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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服