关于vue-tree-chart简单的使用关于vue-tree-chart简单的使用

vue-tree-chart的使用

插件安装
组件内容：vart.vue
页面中使用

vue-tree-chart

view视图 about组件
封装的treeChart组件

vue-tree-chart的使用项目中需要动态展示组织结构，这里只是展示简单的实现，如果需要更复杂的就需要去深入去实现。

插件安装

npm i vue-tree-chart --save

组件内容：vart.vue

table{border-collapse: separate!important; border-spacing: 0!important; }td{position: relative; vertical-align: top; padding:0 0 40px 0; text-align: center; }.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:20px; border-left:2px dashed #ccc; transform: translate3d(-1px,0,0)}.childLevel::before{content: ""; position: absolute; left:50%; bottom:100%; height:15px; border-left:2px dashed#ccc; transform: translate3d(-1px,0,0)}.childLevel::after{content: ""; position: absolute; left:0; right:0; top:-15px; border-top:2px dashed #ccc; }.childLevel:first-child:before, .childLevel:last-child:before{display: none; }.childLevel:first-child:after{left:50%; height:15px; border:2px dashed; 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 dashed; 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 .person{position: relative; display: inline-block; z-index: 2; width:16em; height: 8em; overflow: hidden; border-radius: 4px; display: flex; padding:17px 0px 20px 10px; }.node .person:nth-child(1){border:1px solid #409EFF; background: #409EFF; }.node .person .avat{display: block; width:4em; height: 60px; overflow:hidden; background:#fff; border-radius: 8px; border:1px solid #ccc; box-sizing: border-box; }.right{text-align: left; padding-left: 10px; color: #fff; }.name1{font-weight:bold; }.name{border-bottom: 1px solid #ffffff; }.name2{padding-top:8px; }.node .person .avat img{width:100%; height: 60px; }.node .person .name{height:2em; line-height: 2em; overflow: hidden; color: #fff; width:100%; }.node.hasMate::after{content: ""; position: absolute; left:2em; right:2em; top:2em; border-top:2px solid #ccc; z-index: 1; }/* 横板 */.landscape{transform:translate(-100%,0) rotate(-90deg); transform-origin: 100% 0; }.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; }

页面中使用

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

最后展示简单结构图

文章图片

vue-tree-chart
view视图 about组件

文章图片

#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; }.gl_prs_ctn{width: 188px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px; z-index: 99999; position: fixed; padding: 10px; box-sizing: content-box; height: 142px; }.gl_prs_li{padding: unset; margin: unset; }.gl_prs_li>li{cursor: pointer; list-style: none; border-bottom: 1px solid #efefef; padding: 7px 10px; }li:last-child { border: unset }li:hover{background: #ccc; color: #fff; }

封装的treeChart组件

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

【关于vue-tree-chart简单的使用】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。