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 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
vue中是怎样监听数组变化的
Oct 24 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
js 函数的副作用分析
2011/08/23 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python文件读写常见用法总结
2019/02/22 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python 批量将中文名转换为拼音
2021/02/07 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
上级检查欢迎词
2014/01/18 职场文书
中学教师请假制度
2014/02/03 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
幼儿学前班评语
2014/12/29 职场文书