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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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 多进程 解决难题
2009/06/22 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
Python使用sorted排序的方法小结
2017/07/28 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python滑块验证码的破解实现
2019/11/10 Python
Python实现密码薄文件读写操作
2019/12/16 Python
简单介绍django提供的加密算法
2019/12/18 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
python 多线程中join()的作用
2020/10/29 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
全国优秀辅导员事迹材料
2014/05/14 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang