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 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js快速排序的实现代码
Dec 08 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
C#的几个面试问题
2016/05/22 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
一位农村小子的自荐信
2014/04/07 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
幼儿老师求职信
2014/06/30 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
初三数学教学反思
2016/02/17 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
yolov5返回坐标的方法实例
2022/03/17 Python