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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
js获取指定的cookie的具体实现
2014/02/20 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python读写文件操作示例程序
2013/12/02 Python
python中类的一些方法分析
2014/09/25 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
外企财务年会演讲稿
2014/01/03 职场文书
警察思想汇报
2014/01/04 职场文书
2014年教师节寄语
2014/04/03 职场文书
党员活动日总结
2014/05/05 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
德生2P3收音机开箱评测
2022/04/30 无线电