vue实现树形结构样式和功能的实例代码


Posted in Javascript onOctober 15, 2019

一、主要运用element封装的控件并封装成组件运用,如图所示

vue实现树形结构样式和功能的实例代码

 代码如图所示:

vue实现树形结构样式和功能的实例代码

 下面是子组件的代码:

<template>
 <ul class="l_tree">
  <li class="l_tree_branch" v-for="item in model" :key="item.id">
   <div class="l_tree_click">
    <button type="button" class="l_tree_children_btn" v-if="item.children" @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button>
    <span class="l_folder" @click="clickSize(item.id)" :class="current === item.id ? 'current' : 'currentSize'">{{ item.name }}</span>
   </div>
   <ew-tree
    v-show="!item.show"
    :model="item.children"
    :current="current"
    @change="changeCurrent"></ew-tree>
  </li>
 </ul>
</template>
<script>
export default {
 name: 'EwTree',
 props: {
  model: {
   type: Array,
   default() {
    return []
   }
  },
  current: {
   type: String,
   default: ''
  }
 },
 methods: {
  toggle(item) {
   console.log(item)
   var idx = this.model.indexOf(item)
   this.$set(this.model[idx], 'show', !item.show)
  },
  clickSize(id) {
   console.log(1, id)
   this.$emit('change', id)
  },
  changeCurrent(id) {
   this.clickSize(id)
  }
 },
 mounted() {
 }
}
</script>
<style lang="less" scoped>
*{
 box-sizing: border-box;
 margin: 0;padding: 0;
}
*:before,*:after{
 box-sizing: border-box;
}
ul,
li {
 list-style: none;
}
.current{
 color: #e9c309 !important
}
.l_tree_container {
 width: 100%;
 height: 100%;
 box-shadow: 0 0 3px #ccc;
 margin: 13px;
 position: relative;
}

.l_tree {
 width: calc(100%);
 padding-left: 15px;
}
.l_tree_branch {
 width: 100%;
 height: 100%;
 display: block;
 padding: 13px;
 position: relative;
}

.l_tree_branch .l_tree_children_btn {
 width: 12px;
 height: 12px;
 background-color: #515a68;
 font-size: 8px;
 text-align: center;
 color: #bbbec1;
 outline: none;
 border: 0;
 cursor: pointer;
 border: 1px solid #bbbec1;
 line-height: 11px;
 margin-left: 5px;
}

ul.l_tree:before {
 content: '';
 border-left: 1px dashed #999999;
 height: calc(100% - 24px);
 position: absolute;
 left: 10px;
 top: 0px;
}
.l_tree,
.l_tree_branch {
 position: relative;
}

.l_tree_branch::after {
 content: '';
 width: 18px;
 height: 0;
 border-bottom: 1px dashed #bbbec1;
 position: absolute;
 right: calc(100% - 10px);
 top: 24px;
 left: -5px;
}

.l_tree_container>.l_tree::before,
.l_tree_container>.l_tree>.l_tree_branch::after {
 display: none;
}
.l_folder {
 font-size:11px;
 margin-left: 5px;
 display: inline;
 color: #bbbec1;
 cursor: pointer;
}
</style>

主要难点是:current传值问题,所以current绑定在父组件

 vue实现树形结构样式和功能的实例代码

 父组件中的值和方法:

 vue实现树形结构样式和功能的实例代码

 vue实现树形结构样式和功能的实例代码

 

 当然在运行npm时是需要安装npm install ewtree -S,实现组件化

最终效果如下:

vue实现树形结构样式和功能的实例代码

总结

以上所述是小编给大家介绍的vue实现树形结构样式和功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
各种常用的JS函数整理
Oct 25 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
js实现文本框选中的方法
May 26 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 #Javascript
js实现开关灯效果
Mar 30 #Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 #Javascript
javascript网页随机点名实现过程解析
Oct 15 #Javascript
javascript随机变色实例代码
Oct 15 #Javascript
vue中axios的二次封装实例讲解
Oct 14 #Javascript
You might like
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP插入排序实现代码
2013/04/04 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
chrome原生方法之数组
2011/11/30 Javascript
js切换光标示例代码
2013/10/10 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
领导检查欢迎词
2014/01/14 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python