Merge pull request hukaibaihu#57 from G-lory/master

fix: add selectedClass and selectedKey from props
xiaoaweng · Jul 25, 2020 · 47c8303 · 47c8303
2 parents 203e0a3 + 3de46ff
commit 47c8303
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,16 @@
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
     <script src="dist/index.js"></script>
+
+    <style>
+      @import "dist/style.css";
+      .selected-node {
+        background: tomato;
+      }
+      .bg_node {
+        cursor: pointer;
+      }
+    </style>
   </head>
 <body>
   <div id="app">
@@ -21,6 +31,8 @@
         @on-node-click="onNodeClick"
         @on-node-mouseover="onNodeMouseOver"
         @on-node-mouseout="onNodeMouseOut"
+        selected-class-name="selected-node"
+        selected-key="selectedKey"
       />
     </div>
 
@@ -69,6 +81,7 @@
         },
         onNodeClick (e, data) {
           console.log('CLICK', e);
+          this.$set(data, 'selectedKey', !data['selectedKey']);
         },
         onNodeMouseOver(e, data) {
           console.log('MOUSE OVER', e);

diff --git a/src/components/org-tree/org-tree.vue b/src/components/org-tree/org-tree.vue
@@ -9,6 +9,8 @@
         :collapsable="collapsable"
         :render-content="renderContent"
         :label-class-name="labelClassName"
+        :selected-class-name="selectedClassName"
+        :selected-key="selectedKey"
         @on-expand="(e, data) => $emit('on-expand', e, data)"
         @on-node-focus="(e, data) => $emit('on-node-focus', e, data)"
         @on-node-click="(e, data) => $emit('on-node-click', e, data)"