}
.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'}
]},
]}
]实现效果：
ps：需要特别说明的是，我目前的代码暂时只支持这两种样式，即：
1父节点-1子节点-1/多孙节点，或是1父节点-多子节点-1孙节点，样式是通过jq去判断修改的，以后有时间的话再去研究优化争取可复用性强一些。希望对大家能有所帮助。
总结
以上所述是小编给大家介绍的vue组件横向树实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
