树状布局demo

src/ccccyt/Tree.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="tree-container">
+    <el-row :gutter="20" >
+        <TreeNode v-for="item in colList[0]" :title="item.title" :position-y="item.positionY" position-x="0" :key="item.id"></TreeNode>
+        <TreeNode v-for="item in colList[1]" :title="item.title" :position-y="item.positionY" :position-x="1" :key="item.id"></TreeNode>
+        <TreeNode v-for="item in colList[2]" :title="item.title" :position-y="item.positionY" :position-x="2" :key="item.id"></TreeNode>
+        <TreeNode v-for="item in colList[3]" :title="item.title" :position-y="item.positionY" :position-x="3" :key="item.id"></TreeNode>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import TreeNode from "@/components/TreeNode";
+export default {
+name: "Tree",
+  components: {TreeNode},
+  data() {
+  return {
+    treeHeight: 4,
+    requirements: [{
+      deep: 1,
+      id: 1,
+      parent: null,
+      title: '这是标题',
+    },
+      {
+        deep: 2,
+        id: 2,
+        parent: 1,
+        title: '这是标题2',
+      },
+      {
+        deep: 2,
+        id: 3,
+        parent: 1,
+        priority: 0,
+        title: '这是标题3',
+      },
+      {
+        deep: 3,
+        id: 4,
+        parent: 3,
+        title: '这是标题4',
+      },
+      {
+        deep:4,
+        id:9,
+        parent: 4,
+        title: '这是标题9'
+      },
+      {
+        deep: 3,
+        id: 5,
+        parent: 3,
+        title: '这是标题5',
+      },
+      {
+        deep: 4,
+        id: 6,
+        parent: 5,
+        title: '这是标题6',
+      },
+      {
+        deep: 4,
+        id: 7,
+        parent: 5,
+        title: '这是标题7',
+      },
+      {
+        deep: 4,
+        id: 8,
+        parent: 5,
+        title: '这是标题8',
+      },
+    ],
+    tree: {},
+    nodeMap: {},
+    colList: [[],[],[],[]]
+  }
+  },
+  mounted() {
+    this.array2tree()
+    this.getList()
+    this.tree.positionY = 0
+    this.calculateContentHeight(this.tree)
+    this.calculateNodePositionY()
+    this.offsetPositionY()
+    console.warn(this.tree)
+  },
+  methods: {
+  array2tree(){
+    let treeMap = new Map()
+    this.requirements.forEach((item)=>{
+      treeMap.set(item.id,item)
+    })
+    this.nodeMap = treeMap
+    this.requirements.forEach((item)=>{
+      if(item.parent){
+        let tempParent = treeMap.get(item.parent)
+        if(!tempParent.childs){
+          tempParent.childs = []
+        }
+        tempParent.childs.push(item)
+      }else{
+        this.tree = item
+      }
+    })
+  },
+  getList(){
+    this.requirements.forEach((item)=>{
+      this.colList[item.deep-1].push(item)
+    })
+  },
+  calculateContentHeight(node){
+    if(!node.childs){
+      node.contentHeight = 1
+      return 1
+    }
+    node.contentHeight = node.childs.reduce((total,current)=>{
+      return total + this.calculateContentHeight(current)
+    },0)
+    return node.contentHeight
+  },
+  calculateNodePositionY() {
+    for(let i=1;i<4;i++){
+      let sum = 0
+      this.colList[i].forEach((item)=>{
+        item.positionY = this.nodeMap.get(item.parent).positionY + sum
+        sum = sum + item.contentHeight
+      })
+    }
+  },
+  offsetPositionY(){
+    for(let i=2;i>=0;i--){
+      this.colList[i].forEach((item)=>{
+        if(item.childs){
+          let length = item.childs.length
+          item.positionY = item.childs.reduce((total,current)=>{
+            return total+current.positionY/length
+          },0)
+        }
+      })
+
+    }
+  }
+  }
+}
+</script>
+
+<style scoped>
+.tree-container{
+  min-height: 300px;
+  width: 100%;
+  background-color: #ffffff;
+}
+</style>

src/ccccyt/TreeNode.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="node-container" :style="nodeStyle">
+  <el-card class="node-card">
+    {{title}}
+  </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+name: "TreeNode",
+props:{
+  title: String,
+  positionY: Number,
+  positionX: Number
+},
+computed:{
+  nodeStyle(){
+    return {
+      top: (this.positionY*120)+'px',
+      left: (300*this.positionX)+'px'
+    }
+  }
+}
+}
+</script>
+
+<style scoped>
+.node-container{
+  width: 300px;
+  height: 120px;
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.node-card{
+  width: 260px;
+  height: 100px;
+  background-color: #42b983;
+}
+
+</style>