vue组件横向树实现代码组件横向树实现代码
主要介绍了vue组件横向树实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue
代码：
<template>
<div class="tree">
<ul v-if="treeData && treeData.length">
<li v-for="(column,index) in treeData">
<span class="root">{{column.name}}</span>
<ul v-if="column.children && column.children.length">
<li v-for="(childrenColumn,index) in column.children">
<span>{{childrenColumn.name}}</span>
<ul v-if="childrenColumn.children && childrenColumn.children.length">
<li v-for="(grandChildrenColumn,index) in childrenColumn.children">
<span>{{grandChildrenColumn.name}}</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'transverseTree',
props: {
treeData:{
type:Array,
default:[]
}
},
methods: {
editDom(){
if($('.root').siblings('ul').children('li').length==1){
let num = 26*($('.root').siblings('ul').children('li').find('li').length-1);
$('.root').css({ 'top': num });
$('.root').siblings('ul').children('li').css({ 'top': num });
$('.root').siblings('ul').find('ul').css({ 'top': -num });
if($('.root').siblings('ul').find('li').length > 1){
$('.root').siblings('ul').children('li').children('span').addClass('hasChild');
}
}else{
$('.root').css({ 'top': 26 * ($('.root').siblings('ul').children('li').length - 1) });
}
}
},
mounted() {
this.$nextTick(()=>{
this.editDom();
});
}
};
</script>
<style scope>
.tree{
position: relative;
margin: -16px -16px 0;
min-height: 400px;
padding-left: 11px;
overflow: auto;
}
.tree ul{
width: 210px;
height: 100%;
position: absolute;
}
.tree ul ul{
left: 226px;
top: 0;
}
.tree li{
float: left;
list-style-type: none;
position: relative;
评论0