效果图
完整代码
父组件
<template>
<div class="content">
<!-- 防止存在多个拓扑树 -->
<!-- 渲染一级 -->
<div v-for="(item,index) in treeData" :Key="index" class="item-class">
<div class="position-item">{{item.name}}</div>
<!-- 渲染二级 -->
<demoTreeListFor :itemList="item"></demoTreeListFor>
</div>
</div>
</template>
<script>
import demoTreeListFor from './components/demo-tree-list-for.vue'
export default {
name: '',
props: {},
components: {
demoTreeListFor
},
data () {
return {
treeData: [
{
name: "1",
childern: [
{
name: "1-1", childern: [
{ name: "1-1-1" },
{ name: "1-1-2" },
]
},
{
name: "1-2",
childern: [
{ name: "1-2-1" },
{
name: "1-2-2", childern: [
{ name: "1-2-2-1" },
{ name: "1-2-2-2" },
{
name: "1-2-2-2-1", childern: [
{ name: "1-2-2-2-1-1" },
{ name: "1-2-2-2-1-2" },
{ name: "1-2-2-2-1-3" }
]
}
]
},
{ name: "1-2-3" }
]
}
]
},
{
name: "2",
childern: [
{
name: "2-1",
childern: [
{ name: "2-1-1" },
{ name: "2-1-2" },
{ name: "2-1-3" }
]
}, {
name: "2-2"
}
]
}
],
}
},
computed: {},
watch: {},
created () { },
mounted () { },
methods: {},
}
</script>
<style scoped lang="less">
.content {
width: 100%;
height: 100%;
.item-class {
margin-bottom: 160px;
position: relative;
.position-item {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
}
}
</style>
字组件
- /components/demo-tree-list-for.vue
<template>
<!-- 没有节点不展示 -->
<div class="children-tree" v-if="itemList && itemList.childern">
<div v-for="(item, index) in itemList.childern" :key="index" class="item-class item-flex"
:class="{'item-margin':item && !item.childern,'item-after':index !== itemList.childern.length - 1}">
<div class="position-item"> {{item.name}}</div>
<!-- 递归循环,使其自己撑开高度 -->
<demoTreeListFor :itemList="item"></demoTreeListFor>
</div>
</div>
</template>
<script>
export default {
// name 需与 <demoTreeListFor :itemList="item"></demoTreeListFor> 名一样
name: 'demoTreeListFor',
props: {
itemList: {},
},
components: {},
data () {
return {}
},
computed: {},
watch: {},
created () { },
mounted () { },
methods: {},
}
</script>
<style scoped lang="less">
.children-tree {
// margin-right 会使元素获得 100%宽度,用margin-left使间距跨过元素撑开间距
padding-left: 200px;
box-sizing: border-box;
position: relative;
&::before {
content: "";
position: absolute;
left: 100px;
top: 50px;
width: 150px;
height: 2px;
background-color: orange;
}
.item-class {
position: relative;
.position-item {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
&::before {
content: "";
position: absolute;
left: -50px;
top: 50%;
width: 50px;
height: 2px;
background-color: orange;
}
}
.position-none::after {
height: 0px;
}
}
.item-after {
position: relative;
&::before {
content: "";
position: absolute;
left: -50px;
top: 50px;
width: 2px;
height: 100%;
background-color: orange;
}
}
.item-margin {
padding-bottom: 160px;
box-sizing: border-box;
}
.item-flex {
display: flex;
}
}
</style>