vue组件横向树实现

将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue

代码：

在父组件中使用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去判断修改的，以后有时间的话再去研究优化争取可复用性强一些。希望对大家能有所帮助。

欢迎交流讨论。