将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue
代码：
- {{childrenColumn.name}}
- {{grandChildrenColumn.name}}
在父组件中使用import引入该组件：
注册组件：
在template中使用：
其中，treeData为一个数组，在data中给treeData一个初始值：
实现效果：
ps：需要特别说明的是，我目前的代码暂时只支持这两种样式，即：
1父节点-1子节点-1/多孙节点，或是1父节点-多子节点-1孙节点，样式是通过jq去判断修改的，以后有时间的话再去研究优化争取可复用性强一些。希望对大家能有所帮助。
总结
以上所述是小编给大家介绍的vue组件横向树实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/31245.html