vue横向树结构_vue组件横向树实现代码
將之前的用css3+jq實現的橫向樹樣式簡單封裝成組件使用到vue項目中，文件名為transverseTree.vue
代碼：
{{column.name}}
{{childrenColumn.name}}
{{grandChildrenColumn.name}}
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();
});
}
};
.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;
}
在父組件中使用import引入該組件：
import transverseTree from './transverseTree'
注冊組件：
components: { ifbpInfolistCard,transverseTree },
在template中使用：
其中，treeData為一個數組，在data中給treeData一個初始值：
treeData: [
{name:'報表名稱1',
children:[
{name:'功能名稱1',
children:[
{name:'磁貼名稱1'}
]},
{name:'功能名稱2',
children:[
{name:'磁貼名稱1'}
]},
{name:'功能名稱3',
children:[
{name:'磁貼名稱1'}
]},
]}
]
實現效果：
ps：需要特別說明的是，我目前的代碼暫時只支持這兩種樣式，即：
1父節點-1子節點-1/多孫節點，或是1父節點-多子節點-1孫節點，樣式是通過jq去判斷修改的，以后有時間的話再去研究優化爭取可復用性強一些。希望對大家能有所幫助。
總結
以上所述是小編給大家介紹的vue組件橫向樹實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對我們網站的支持！
本文標題: vue組件橫向樹實現代碼
本文地址: http://www.cppcns.com/wangluo/javascript/236324.html
總結
以上是生活随笔為你收集整理的vue横向树结构_vue组件横向树实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（1901）vue之电商管理系统
- 下一篇： 前端学习（1841）：前端面试题之rea