将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中,文件名为transverseTree.vue
代码:
- {{column.name}}
- {{childrenColumn.name}}
- {{grandChildrenColumn.name}}
在父组件中使用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组件横向树实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!