Vue: treechart tree

Time：2022-5-6

1、 Lateral

1. Effect

 

2. Code

1) , treechart components

{{treeData.name}}
          
            
              
                
              
              
            
            {{treeData.name}}
          
        
        
      
    
    
      
        
      
    
  



export default {
  name: "TreeChart",
  props: ["json"],
  data() {
    return {
      treeData: {}
    }
  },
  watch: {
    json: {
      handler: function(Props){
        let extendKey = function(jsonData){
          jsonData.extend = (jsonData.extend===void 0 ? true: !!jsonData.extend);
          if(Array.isArray(jsonData.children)){
            jsonData.children.forEach(c => {
              extendKey(c)
            })
          }
          return jsonData;
        }
        if(Props){
          this.treeData = extendKey(Props);
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleExtend: function(treeData){
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    }
  }
}



table{border-collapse: separate!important;border-spacing: 0!important;}
td{position: relative; vertical-align: top;padding:0 0 50px 0;text-align: center; }
.extend_handle{position: absolute;left:50%;bottom:30px; width:10px;height: 10px;padding:10px;transform: translate3d(-15px,0,0);cursor: pointer;}
.extend_handle:before{content:""; display: block; width:100%;height: 100%;box-sizing: border-box; border:2px solid;border-color:#ccc #ccc transparent transparent;
  transform: rotateZ(135deg);transform-origin: 50% 50% 0;transition: transform ease 300ms;}
.extend_handle:hover:before{border-color:#333 #333 transparent transparent;}
/* .extend .extend_handle:before{transform: rotateZ(-45deg);} */
.extend::after{content: "";position: absolute;left:50%;bottom:15px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::before{content: "";position: absolute;left:50%;bottom:100%;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::after{content: "";position: absolute;left:0;right:0;top:-15px;border-top:2px solid #ccc;}
.childLevel:first-child:before, .childLevel:last-child:before{display: none;}
.childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:#ccc transparent transparent #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)}
.childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:#ccc #ccc transparent transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)}
.childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}
.node{position: relative; display: inline-block;margin: 0 1em;box-sizing: border-box; text-align: center;}
.node:hover{color: #2d8cf0;cursor: pointer;}
.node .person{position: relative; display: inline-block;z-index: 2;width:6em; overflow: hidden;}
.node .person .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;}
.node .person .avat:hover{ border: 1px solid #2d8cf0;}
.node .person .avat img{width:100%;height: 100%;}
.node .person .name{height:2em;line-height: 2em;overflow: hidden;width:100%;}
.node.hasMate::after{content: "";position: absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index: 1;}
.node .paeson_name{transform: rotate(90deg);position: absolute; top: 68px;right: 39px;width: 88px;text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}


.landscape{transform:translate(-100%,0) rotate(-90deg);transform-origin: 100% 0;}
.landscape .node{text-align: left;height: 8em;width:8em;right: 18px;}
.landscape .person{position: absolute; transform: rotate(90deg);height: 4em;top:4em;left: 2.5em;}
.landscape .person .avat{position: absolute;left: 0;border-radius: 2em;border-width:2px;}
.landscape .person .name{height: 4em; line-height: 4em;}
.landscape .hasMate{position: relative;}
.landscape .hasMate .person{position: absolute; }
.landscape .hasMate .person:first-child{left:auto; right:-4em;}
.landscape .hasMate .person:last-child{left: -4em;margin-left:0;}

2) Use components

introduce

import TreeChart from '@/components/TreeChart'

register

components: { TreeChart },

use

array

data: {
        Name: 'level 1',
        image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
        class: ["rootNode"],
        children: [
          {
            Name: 'level 1-1',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
          },
          {
            Name: 'level 1-2',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
            children: [
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-3',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              }
            ]
          }
        ]
      }

style

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app .avat {
  border-radius: 2em;
  border-width: 2px;
}

#app .name {
  font-weight: 700;
}

Complete code

import TreeChart from '@/components/TreeChart'
export default {
  name: 'app',
  components: { TreeChart },
  data() {
    return {
      data: {
        Name: 'level 1',
        image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
        class: ["rootNode"],
        children: [
          {
            Name: 'level 1-1',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
          },
          {
            Name: 'level 1-2',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
            children: [
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-3',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              }
            ]
          }
        ]
      }
    }
  },
  created(){

  },
  methods: {
  }
}



#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app .avat {
  border-radius: 2em;
  border-width: 2px;
}

#app .name {
  font-weight: 700;
}

2、 Vertical

1. Effect

2. Code

1) , components

{{treeData.name}}
          
          
            
              
              
            
            {{treeData.mate.name}}
          
        
        
      
    
    
      
        
      
    
  



export default {
  name: "TreeChart",
  props: ["json"],
  data() {
    return {
      treeData: {},
      // image_url: require('@/assets/tasly-logo03.png')
    }
  },
  watch: {
    json: {
      handler: function(Props){
        let extendKey = function(jsonData){
          jsonData.extend = (jsonData.extend===void 0 ? true: !!jsonData.extend);
          if(Array.isArray(jsonData.children)){
            jsonData.children.forEach(c => {
              extendKey(c)
            })
          }
          return jsonData;
        }
        if(Props){
          this.treeData = extendKey(Props);
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleExtend: function(treeData){
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    }
  }
}



table{border-collapse: separate!important;border-spacing: 0!important;}
td{position: relative; vertical-align: top;padding:0 0 20px 0;text-align: center; }

.extend_handle{position: absolute;left:50%;bottom:10px; width:10px;height: 10px;padding:10px;transform: translate3d(-15px,0,0);cursor: pointer;}
.extend_handle:before{content:""; display: block; width:100%;height: 100%;box-sizing: border-box; border:2px solid;border-color:#ccc #ccc transparent transparent;
  transform: rotateZ(135deg);transform-origin: 50% 50% 0;transition: transform ease 300ms;}
.extend_handle:hover:before{border-color:#333 #333 transparent transparent;}
.extend .extend_handle:before{transform: rotateZ(-45deg);}

.extend::after{content: "";position: absolute;left:50%;bottom:15px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.extend:last-child:after{height: 0px}
.childLevel::before{content: "";position: absolute;left:50%;bottom:100%;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::after{content: "";position: absolute;left:0;right:0;top:-15px;border-top:2px solid #ccc;}
.childLevel:first-child:before, .childLevel:last-child:before{display: none;}
.childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:#ccc transparent transparent #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)}
.childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:#ccc #ccc transparent transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)}
.childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}

.node{position: relative; display: inline-block;width: 13em;box-sizing: border-box; text-align: center;}
.node .person{position: relative; display: inline-block;z-index: 2;width:200px; overflow: hidden;}
.node .person .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;}
.node .person .avat img{width:100%;height: 100%;}
.node .person .name{height:2em;line-height: 2em;overflow: hidden;width:100%;}
.node.hasMate::after{content: "";position: absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index: 1;}
.node.hasMate .person:last-child{margin-left:1em;}

.landscape{transform: rotate(-90deg); padding:0 4em;}
.landscape .node{text-align: left;height: 8em;width:8em;}
.landscape .person{position: relative; transform: rotate(90deg);padding-left: 4.5em;height: 4em;top:4em;left: -1em;}
.landscape .person .avat{position: absolute;left: 0;}
.landscape .person .name{height: 4em; line-height: 4em;}
.landscape .hasMate{position: relative;}
.landscape .hasMate .person{position: absolute; }
.landscape .hasMate .person:first-child{left:auto; right:-4em;}
.landscape .hasMate .person:last-child{left: -4em;margin-left:0;}

introduce

import TreeChart from '@/components/TreeChart'

register

components: { TreeChart },

use

Complete code

landscape.length}" />
  



import TreeChart from '@/components/TreeChart'
export default {
  name: 'showChart2',
  components: { TreeChart },
  data() {
    return {
   <span style="color: rgba(255, 0, 0, 1)">   landscape: [],
      data: {
        Name: < / span > 'level 1',
        image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
        class: ["rootNode"],
        children: [
          {
            Name: 'level 1-1',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
          },
          {
            Name: 'level 1-2',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
            children: [
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-3',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              }
            ]
          }
        ]
      }
    }
  },
  created(){

  },
  methods: {
  }
}



#treeDiv {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 5px;
}

#treeDiv .avat {
  border-radius: 2em;
  border-width: 2px;
}

#treeDiv .name {
  font-weight: 700;
}

Note: to change the horizontal direction of effect 1 into vertical direction, modify as follows:

:class="{landscape: landscape.length}"

 

Tags: , , , ,

Recommended Today

Third party libraries commonly used by IOS swift

All developers know that don’t build wheels repeatedly. To improve work efficiency, many people have built wheels, which are easy to use and have few bugs. This article is to sort out the third-party libraries that can be used well. I hope it can help you, help yourself and update them slowly. If there are […]