Vue递归实现树形结构数据 - - 关系拓扑图

效果图

完整代码

父组件

<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>