update

YunWisdom · Nov 30, 2017 · 6e4004f · 6e4004f
1 parent 0408969
commit 6e4004f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 30 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -28,7 +28,7 @@ export default {
         label: '企易购科技有限公司',
         children: [{
           id: 2,
-          label: '研发部',
+          label: '产品研发部',
           children: [{
             id: 5,
             label: '研发-前端'
@@ -60,7 +60,7 @@ export default {
           label: 'HR人事'
         }]
       },
-      horizontal: false,
+      horizontal: true,
       collapsable: true
     }
   },

diff --git a/src/components/org-tree/node.js b/src/components/org-tree/node.js
@@ -26,7 +26,11 @@ export const renderNode = (h, data, context) => {
     domProps: {
       className: cls.join(' ')
     }
-  }, childNodes)
+  }, [h('div', {
+    domProps: {
+      className: 'org-tree-node-inner'
+    }
+  }, childNodes)])
 }
 
 // 创建展开折叠按钮
@@ -86,12 +90,16 @@ export const renderLabel = (h, data, context) => {
   return h('div', {
     domProps: {
       className: cls.join(' ')
+    }
+  }, [h('div', {
+    domProps: {
+      className: 'org-tree-node-label-inner'
     },
     style: {width: labelWidth},
     on: {
       click: e => clickHandler && clickHandler(e, data)
     }
-  }, childNodes)
+  }, childNodes)])
 }
 
 // 创建 node 子节点

diff --git a/src/components/org-tree/org-tree.vue b/src/components/org-tree/org-tree.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="org-tree" :class="{horizontal, collapsable}">
-    <org-tree-node
-      :data="data"
-      :props="props"
-      :horizontal="horizontal"
-      :label-width="labelWidth"
-      :collapsable="collapsable"
-      :render-content="renderContent"
-      :label-class-name="labelClassName"
-      @on-expand="$emit('on-expand', $event)"
-      @on-node-click="(e, data) => {$emit('on-node-click', e, data)}"
-    ></org-tree-node>
+  <div class="org-tree-container">
+    <div class="org-tree" :class="{horizontal, collapsable}">
+      <org-tree-node
+        :data="data"
+        :props="props"
+        :horizontal="horizontal"
+        :label-width="labelWidth"
+        :collapsable="collapsable"
+        :render-content="renderContent"
+        :label-class-name="labelClassName"
+        @on-expand="$emit('on-expand', $event)"
+        @on-node-click="(e, data) => {$emit('on-node-click', e, data)}"
+      ></org-tree-node>
+    </div>
   </div>
 </template>
 

diff --git a/src/styles/org-tree.less b/src/styles/org-tree.less
@@ -1,8 +1,13 @@
-.org-tree {
+.org-tree-container {
   display: inline-block;
   padding: 15px;
-  text-align: center;
   background-color: #fff;
+}
+
+.org-tree {
+  // display: inline-block;
+  display: table;
+  text-align: center;
 
   &:before, &:after {
     content: '';
@@ -28,10 +33,13 @@
 .org-tree-node-label {
   position: relative;
   display: inline-block;
-  padding: 10px 15px;
-  text-align: center;
-  border-radius: 3px;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
+
+  .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;
@@ -153,10 +161,11 @@
 
 .horizontal {
   .org-tree-node {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
+    // display: flex;
+    // flex-direction: row;
+    // justify-content: flex-start;
+    // align-items: center;
+    display: table-cell;
     float: none;
     padding-top: 0;
     padding-left: 20px;
@@ -191,6 +200,15 @@
       border-top: 1px solid #ddd;
     }
 
+    .org-tree-node-inner {
+      display: table;
+    }
+
+  }
+
+  .org-tree-node-label {
+    display: table-cell;
+    vertical-align: middle;
   }
 
   &.collapsable .org-tree-node.collapsed {
@@ -218,10 +236,11 @@
   }
 
   .org-tree-node-children {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: center;
+    // align-items: flex-start;
+    display: table-cell;
     padding-top: 0;
     padding-left: 20px;
 
@@ -237,5 +256,9 @@
     &:after {
       display: none;
     }
+
+    & > .org-tree-node {
+      display: block;
+    }
   }
 }