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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
零基础php编程好学吗
2019/10/11 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
C#公司笔试题
2014/03/28 面试题
大学军训感言800字
2014/02/27 职场文书
企业承诺书怎么写
2014/05/24 职场文书
献爱心标语
2014/06/21 职场文书
作风建设剖析材料
2014/10/06 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
python开发制作好看的时钟效果
2022/05/02 Python
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL