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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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访问查询mysql数据的三种方法
2006/10/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
javascript date格式化示例
2013/09/25 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python 判断文件还是文件夹的简单实例
2019/06/10 Python
python设置环境变量的作用和实例
2019/07/09 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
法学院方阵解说词
2014/01/29 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书