code-vue2-org-tree 树型结构的使用

vue2-org-tree 用于创建和显示组织结构树状图，可视化组织结构，例如公司的层级、部门之间的关系、团队层级关系这些，支持折叠，展开，自定义icon等

1.安装依赖

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

2.vue引入 

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

3.页面内单独引入css

 需要在页面内单独引入css；

 新建一个css文件将下面的css在使用vue2-org-tree的地方进行引用

.org-tree-container{display:inline-block;padding:15px;background-color:#fff}.org-tree{display:table;text-align:center}.org-tree:after,.org-tree:before{content:"";display:table}.org-tree:after{clear:both}.org-tree-node,.org-tree-node-children{position:relative;margin:0;padding:0;list-style-type:none}.org-tree-node-children:after,.org-tree-node-children:before,.org-tree-node:after,.org-tree-node:before{transition:all .35s}.org-tree-node-label{position:relative;display:inline-block}.org-tree-node-label .org-tree-node-label-inner{padding:10px 15px;text-align:center;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,.15)}.org-tree-node-btn{position:absolute;top:100%;left:50%;width:20px;height:20px;z-index:10;margin-left:-11px;margin-top:9px;background-color:#fff;border:1px solid #ccc;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.15);cursor:pointer;transition:all .35s ease}.org-tree-node-btn:hover{background-color:#e7e8e9;-webkit-transform:scale(1.15);transform:scale(1.15)}.org-tree-node-btn:after,.org-tree-node-btn:before{content:"";position:absolute}.org-tree-node-btn:before{top:50%;left:4px;right:4px;height:0;border-top:1px solid #ccc}.org-tree-node-btn:after{top:4px;left:50%;bottom:4px;width:0;border-left:1px solid #ccc}.org-tree-node-btn.expanded:after{border:none}.org-tree-node{padding-top:20px;display:table-cell;vertical-align:top}.org-tree-node.collapsed,.org-tree-node.is-leaf{padding-left:10px;padding-right:10px}.org-tree-node:after,.org-tree-node:before{content:"";position:absolute;top:0;left:0;width:50%;height:19px}.org-tree-node:after{left:50%;border-left:1px solid #ddd}.org-tree-node:not(:first-child):before,.org-tree-node:not(:last-child):after{border-top:1px solid #ddd}.collapsable .org-tree-node.collapsed{padding-bottom:30px}.collapsable .org-tree-node.collapsed .org-tree-node-label:after{content:"";position:absolute;top:100%;left:0;width:50%;height:20px;border-right:1px solid #ddd}.org-tree>.org-tree-node{padding-top:0}.org-tree>.org-tree-node:after{border-left:0}.org-tree-node-children{padding-top:20px;display:table}.org-tree-node-children:before{content:"";position:absolute;top:0;left:50%;width:0;height:20px;border-left:1px solid #ddd}.org-tree-node-children:after{content:"";display:table;clear:both}.horizontal .org-tree-node{display:table-cell;float:none;padding-top:0;padding-left:20px}.horizontal .org-tree-node.collapsed,.horizontal .org-tree-node.is-leaf{padding-top:10px;padding-bottom:10px}.horizontal .org-tree-node:after,.horizontal .org-tree-node:before{width:19px;height:50%}.horizontal .org-tree-node:after{top:50%;left:0;border-left:0}.horizontal .org-tree-node:only-child:before{top:1px;border-bottom:1px solid #ddd}.horizontal .org-tree-node:not(:first-child):before,.horizontal .org-tree-node:not(:last-child):after{border-top:0;border-left:1px solid #ddd}.horizontal .org-tree-node:not(:only-child):after{border-top:1px solid #ddd}.horizontal .org-tree-node .org-tree-node-inner{display:table}.horizontal .org-tree-node-label{display:table-cell;vertical-align:middle}.horizontal.collapsable .org-tree-node.collapsed{padding-right:30px}.horizontal.collapsable .org-tree-node.collapsed .org-tree-node-label:after{top:0;left:100%;width:20px;height:50%;border-right:0;border-bottom:1px solid #ddd}.horizontal .org-tree-node-btn{top:50%;left:100%;margin-top:-11px;margin-left:9px}.horizontal>.org-tree-node:only-child:before{border-bottom:0}.horizontal .org-tree-node-children{display:table-cell;padding-top:0;padding-left:20px}.horizontal .org-tree-node-children:before{top:50%;left:0;width:20px;height:0;border-left:0;border-top:1px solid #ddd}.horizontal .org-tree-node-children:after{display:none}.horizontal .org-tree-node-children>.org-tree-node{display:block}
/*# sourceMappingURL=style.css.map */

4. 需要的图表是由右向左展开

ve2-org-tree只支持从左向右展开，从上向下展开；

 需要的是

5.具体实现

transform: rotateY(180deg);
2D范围内围绕Y轴旋转180度

（1）整体添加旋转

<div class="AllTree">
  <vue2-org-tree
   :data="treeData"
   :horizontal="horizontal"
   :collapsable="collapsable"
   :label-class-name="labelClassName"
   :render-content="renderContent"
    name="organ"
    @on-expand="onExpand"
    @on-node-click="onNodeClick"/>
</div>

 在AllTree的类名中添加样式 

transform: rotateY(180deg);

 

(2) 节点进行旋转

节点渲染

   //渲染节点
    renderContent(h, data) {
      return (
            <div class="ReNode">
              <div class="ReNodeImg" > <svg t="1698143309831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2342" width="16" height="16"><path d="M13.7216 782.677333l471.8592 228.5568a23.825067 23.825067 0 0 0 21.162667 0l471.722666-228.5568a23.074133 23.074133 0 0 0 13.1072-20.48V213.674667a23.210667 23.210667 0 0 0-3.6864-11.605334c-0.682667-1.297067-1.8432-1.8432-2.730666-2.935466-1.365333-1.501867-2.2528-3.2768-3.959467-4.3008-0.887467-0.546133-2.048-0.546133-2.8672-1.092267-0.682667-0.273067-0.955733-0.955733-1.706667-1.2288L504.900267 9.6256a25.8048 25.8048 0 0 0-17.681067 0l-471.722667 182.954667c-0.750933 0.2048-1.024 1.024-1.570133 1.365333-1.024 0.341333-2.048 0.341333-2.8672 0.887467-1.706667 1.160533-2.730667 2.730667-3.959467 4.3008-0.887467 0.955733-2.048 1.6384-2.730666 2.8672a21.9136 21.9136 0 0 0-3.6864 11.6736v548.522666a23.3472 23.3472 0 0 0 13.038933 20.48z m506.0608 171.076267V411.989333l424.482133-164.522666v500.5312l-424.482133 205.755733zM496.0256 55.569067l408.3712 158.1056L496.0256 372.053333 87.790933 213.674667 496.093867 55.569067z" fill="#2D87F9" p-id="2343"></path></svg></div>
              <div class="ReNodeAbout" style="">{data.label}</div>
            </div>
      );
    },

 ReNode节点下进行旋转

transform: rotateY(180deg);

 

实现最后的效果

 6.参考

学习参考这篇文章：http://t.csdnimg.cn/Qe1Zm