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

代码：

模板div class=' tree ' ul v-if=' treeData treeData。长度' Li v-for='(列，索引)在treeData“span class=”根{列。name } }/span ul v-if='列。儿童专栏。孩子们。长度' Li v-for='(子列，索引)在列。儿童专栏。长度“children”span { { children }列。name } }/span ul v-if=' children '列。孩子们。长度' Li v-for='根')。兄弟姐妹(' ul ').儿童('里').length==1){ let num=26*($(').根')。兄弟姐妹(' ul ').儿童('里').查找('里').长度-1);$('.根')。CSS({ ' top ' : num })；$('.根')。兄弟姐妹(' ul ').儿童('里').CSS({ ' top ' : num })；$('.根')。兄弟姐妹(' ul ').查找(' ul ').CSS({ ' top ' :-num })；if($(').根')。兄弟姐妹(' ul ').查找('里').长度1){ $('。根')。兄弟姐妹(' ul ').儿童('里').儿童(' span ').添加类(' HasChild ')；} }else{ $(' .根')。css({ 'top': 26 * ($(')).根')。兄弟姐妹(' ul ').儿童('里').length-1)})；} } },挂载(){这个.$ nextTick(()={ this。editdom()；});} };/script样式范围。树{位置：相对；边距：-16px-16px 0；最小高度： 400像素；左填充左： 11px飞越：汽车；}.树ul { width: 210px高度： 100%;绝对位置：}.tree ul ul { left : 226 pxtop : 0；}.树li{左侧浮动：列表样式类型：无；相对位置：padding: 16px 5px 0 5px }。树里跨度{位置：相对；显示器：内联块；宽度： 200像素；高度： 36px背景： # F0F 0 F5边界半径： 4px文本装饰：无；color : # 2d 2d font-size : 14px；线高： 36px文本对齐：中心；}.{装箱规格： inherit }之前的树Li : before content : " "；绝对位置：top : 33pxleft :-7px；边框-top: 2px实心# D2D2D7宽度： 12px}.{装箱规格： inherit }后的树Li : after content : " "；绝对位置：top : 8pxleft :-9px；高度： 100%;边框-左侧： 2px实心# D2D2D7}。树li:第一个孩子：后{高度： 51%;边框-左侧： 2px实心# D2D2D7边框-top: 2px实心# D2D2D7top: 33px宽度： 1px边框-左上角-半径： 4px}.树李：后生子： {身高： 25px边框-左侧： 2px实心# D2D2D7边框-bottom: 2px实心# D2D2D7top: 8px宽度： 1px边框-底部-左侧-半径： 4px}.仅树li:only儿童1990年后.树李：独生子女：之前{显示：无；}.tree ul ul Li :独生子：之前{ display : inline-block；}.仅树ul ul li:only独生子在{ display : inline-block；}.树li:only之前的独生子span . root 2000年前36860 . 688686868686树li:only独生子跨度。{ content : }之前的haschild 33603360绝对位置：top : 17pxright :-14px；边框-top: 2px实心# D2D2D7宽度： 14px}.仅树ul ul ul li:only独生子斯潘：之前在{内容： }之前；绝对位置：top : 17pxleft :-26px；边框-top: 2px实心# D2D2D7宽度： 26px}/样式在父组件中使用进口引入该组件：

从""导入横向对象。/"横向"注册组件：

组件： { ifbpInfolistCard，横断者}，在模板中使用：

横向树：树形数据='树形数据'/横向树其中，treeData为一个数组，在数据中给treeData一个初始值：

TreeData: [{name: '报表名称1 '，children: [{name3360 '函数名称1 '，children3360 [{name: '切片名称1'}]}，{name: '函数名称2 '，children 3360[{name: '切片名称1'}] 1'}]，{ name : '特征名称3 '，children :[{ name 3: '

Ps:需要注意的是，我目前的代码暂时只支持这两种风格，即：

1个父节点-1个子节点-1/多子节点，或1个父节点-多子节点-1个子节点。风格由jq判断和修改。如果你将来有时间，你可以学习和优化，以获得更好的可重用性。希望对大家有帮助。

摘要

以上是边肖介绍的vue组件水平树的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！