css 实现树形结构布局

image.png

• 父节点页面

      <div class="processDesign">
        <div class="process" v-for="(item, idx) in nodeList" :key="idx">
          <div class="rootNode" v-if="item.type == 'root'">
            <div>根节点</div>
          </div>
          <NodePort v-if="item.children" :nodeList="item.children"/>
        </div>
      </div>

• 父节点js

import Vue from 'vue'
import NodePort from '@/views/5gMsg/ChatbotProcessDesign/NodePort/NodePort'
export default {
    components: {
        NodePort
    },
    data () {
        return {
            nodeList: [
                {
                    label: '模板名称',
                    id: 1,
                    type: 'root',
                    children: [
                        {
                            label: '子节点1',
                            id: 2,
                            type: 'card',
                            children: [
                                {
                                    label: '子节点1-1',
                                    id: 4,
                                    type: 'btn'
                                },
                                {
                                    label: '子节点1-2',
                                    id: 44,
                                    type: 'btn',
                                    children: [
                                        {
                                            label: '叶子子节点1',
                                            id: 7,
                                            type: 'btn',
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            label: '子节点3',
                            id: 8,
                            type: 'card',
                            children: [
                                {
                                    label: '子节点3-1',
                                    id: 12,
                                    type: 'btn',
                                    children: [
                                        {
                                            label: '叶子节点1',
                                            id: 108,
                                            type: 'btn',
                                        }
                                    ]
                                },
                                {
                                    label: '子节点3-2',
                                    id: 13,
                                    type: 'btn',
                                    children: [
                                        {
                                            label: '叶子节点2',
                                            id: 132,
                                            type: 'btn',
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    } 
}

• 子节点

<template>
  <div class="nodewrap">
    <div class="nodeLine"></div>
    <div class="nodeLine2" v-if="nodeList && (nodeList.length > 1)"></div>
    <div class="nodeport">
      <div  class="nodeItem" :class="nodeList.length > 1 ? 'nodeItems' : ''" v-for="(node, idx) in nodeList" :key="idx">
        <div class="nodeLine"></div>
        <div class="nodeType">
          <div class="nodeInfo">
            <div class="">{{  node.type }}</div>
            <div class=""> {{  node.label }}</div>
          </div>
        </div>
        <NodePort v-if="node.children" :nodeList="node.children"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'NodePort',
    props: {
        nodeList: []
    }
}
</script>

<style lang="scss" scoped>
@import "../process.scss";
</style>

• css样式

.processDesign {
  .process {
    display: inline-block;
    text-align: center;
    width: 100%;
  }
  .childNodeItem {
    width: 140px;
    border: 1px solid #ddd;
  }
  .rootNode{
    width: 140px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #ddd;
  }
  .nodewrap{
    display: inline-block;
  }
  .nodeLine {
    width: 100%;
    height: 50px;
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 2px;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -1px;
      background: #4c6cf5;
    }
  }
  .nodeType{
    width: 140px;
  }
  .nodeLine2 {
    width: 100%;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: #4c6cf5;
    }
  }
  .nodeport{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .nodeInfo{
    padding: 0 20px;
    height: 100px;
    border: 1px solid blue;
  }
  .nodeItem {
    margin: 0 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nodeItems{
    &:first-child {
      margin: 0;
      transform: translateX(-50%);
      position: relative;

      &:after {
        position: absolute;
        content: '';
        right: 0;
        width: 50%;
        top: 0;
        height: 2px;
        background: #4c6cf5;
      }
    }

    &:last-child {
      margin: 0;
      transform: translateX(50%);
      position: relative;

      &:after {
        position: absolute;
        content: '';
        left: 0;
        width: 50%;
        top: 0;
        height: 2px;
        background: #4c6cf5;
      }
    }
  }
}