vue组件横向树实现代码


Posted in Javascript onAugust 02, 2018

将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中,文件名为transverseTree.vue

代码:

<template>
 <div class="tree">
  <ul v-if="treeData && treeData.length">
   <li v-for="(column,index) in treeData">
    <span class="root">{{column.name}}</span>
    <ul v-if="column.children && column.children.length">
     <li v-for="(childrenColumn,index) in column.children">
      <span>{{childrenColumn.name}}</span>
      <ul v-if="childrenColumn.children && childrenColumn.children.length">
       <li v-for="(grandChildrenColumn,index) in childrenColumn.children">
        <span>{{grandChildrenColumn.name}}</span>
       </li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </div>
</template>
<script>
 export default {
 name: 'transverseTree',
 props: {
  treeData:{
   type:Array,
   default:[]
  }
 },
 methods: {
  editDom(){
   if($('.root').siblings('ul').children('li').length==1){
    let num = 26*($('.root').siblings('ul').children('li').find('li').length-1);
    $('.root').css({ 'top': num });
    $('.root').siblings('ul').children('li').css({ 'top': num });
    $('.root').siblings('ul').find('ul').css({ 'top': -num });
    if($('.root').siblings('ul').find('li').length > 1){
     $('.root').siblings('ul').children('li').children('span').addClass('hasChild');
    }
   }else{
    $('.root').css({ 'top': 26 * ($('.root').siblings('ul').children('li').length - 1) });
   }
  }
 },
 mounted() {
  this.$nextTick(()=>{
   this.editDom();
  });
 }
 };
</script>
<style scope>
.tree{
 position: relative;
 margin: -16px -16px 0;
 min-height: 400px;
 padding-left: 11px;
 overflow: auto;
}
.tree ul{
 width: 210px;
 height: 100%;
 position: absolute;
}
.tree ul ul{
 left: 226px;
 top: 0;
}
.tree li{
 float: left;
 list-style-type: none;
 position: relative;
 padding: 16px 5px 0 5px;
}
.tree li span{
 position: relative;
 display: inline-block;
 width: 200px;
 height: 36px;
 background: #F0F0F5;
 border-radius: 4px;
 text-decoration: none;
 color: #2D2D2D;
 font-size: 14px;
 line-height: 36px;
 text-align: center;
}
.tree li::before{
 box-sizing:inherit;
 content: '';
 position: absolute;
 top: 33px;
 left: -7px;
 border-top: 2px solid #D2D2D7;
 width: 12px;
}
.tree li::after{
 box-sizing:inherit;
 content: '';
 position: absolute;
 top: 8px;
 left: -9px;
 height: 100%;
 border-left: 2px solid #D2D2D7;
}
.tree li:first-child::after{
 height: 51%;
 border-left: 2px solid #D2D2D7;
 border-top: 2px solid #D2D2D7;
 top: 33px;
 width: 1px;
 border-top-left-radius: 4px;
}
.tree li:last-child::after{
 height: 25px;
 border-left: 2px solid #D2D2D7;
 border-bottom: 2px solid #D2D2D7;
 top: 8px;
 width: 1px;
 border-bottom-left-radius: 4px;
}
.tree li:only-child::after,
.tree li:only-child::before{
 display: none;
}
.tree ul ul li:only-child::before{
 display: inline-block;
}
.tree ul ul li:only-child span::before{
 display: inline-block;
}
.tree li:only-child span.root::before,.tree li:only-child span.hasChild::before{
 content: '';
 position: absolute;
 top: 17px;
 right: -14px;
 border-top: 2px solid #D2D2D7;
 width: 14px;
}
.tree ul ul ul li:only-child span::before{
 content: '';
 position: absolute;
 top: 17px;
 left: -26px;
 border-top: 2px solid #D2D2D7;
 width: 26px;
}
</style>

在父组件中使用import引入该组件:

import transverseTree from './transverseTree'

注册组件:

components: { ifbpInfolistCard,transverseTree },

在template中使用:

<transverse-tree :treeData='treeData'></transverse-tree>

其中,treeData为一个数组,在data中给treeData一个初始值:

treeData: [
{name:'报表名称1',
children:[
{name:'功能名称1',
children:[
{name:'磁贴名称1'}
]},
{name:'功能名称2',
children:[
{name:'磁贴名称1'}
]},
{name:'功能名称3',
children:[
{name:'磁贴名称1'}
]},
]}
]

实现效果:

vue组件横向树实现代码

vue组件横向树实现代码

ps:需要特别说明的是,我目前的代码暂时只支持这两种样式,即:

1父节点-1子节点-1/多孙节点,或是1父节点-多子节点-1孙节点,样式是通过jq去判断修改的,以后有时间的话再去研究优化争取可复用性强一些。希望对大家能有所帮助。

总结

以上所述是小编给大家介绍的vue组件横向树实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 #Javascript
在微信小程序里使用watch和computed的方法
Aug 02 #Javascript
在小程序中使用Echart图表的示例代码
Aug 02 #Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 #Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 #Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 #Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 #Javascript
You might like
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php跨站攻击实例分析
2014/10/28 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
nodejs基础应用
2017/02/03 NodeJs
js实现文本上下来回滚动
2017/02/03 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python 自动补全(vim)
2014/11/30 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python调用C++程序的方法详解
2017/01/24 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python使用mysql数据库示例代码
2017/05/21 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
python中time tzset()函数实例用法
2021/02/18 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
中学生差生评语
2014/01/30 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
四年级评语大全
2014/04/21 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android