修复新增BUG，优化界面样式

src/views/tree/tree.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <!-- 
-      拖拽
-      draggable
-      @node-drop="handleDrop"
-      @node-drag-enter="handleDragEnter"
-      :allow-drop="allowDrop"
+			拖拽
+			draggable
+			@node-drop="handleDrop"
+			@node-drag-enter="handleDragEnter"
+			:allow-drop="allowDrop"
     -->
     <el-tree
       :props="props"
@@ -13,17 +13,17 @@
       node-key="id"
       lazy
       show-checkbox
-      :expand-on-click-node="false"
+      :expand-on-click-node="expand"
       ref="tree"
       v-loading="loading"
     >
       <template slot-scope="{data,node}">
-        <div>
-          {{data.name}}
+        <div class="row">
+          <span class="content">{{data.name}}</span>
           <span class="handle">
-            <el-button type="text" size="mini" @click="addNode(data,node)">新增</el-button>
-            <el-button v-if="data.id!=-1" type="text" size="mini" @click="delNode(data,node)">删除</el-button>
-            <el-button v-if="data.id!=-1" type="text" size="mini" @click="putNode(data,node)">更新</el-button>
+            <el-button type="text" size="mini" @click.stop.prevent="addNode(data,node)">新增</el-button>
+            <el-button v-if="data.id!=-1" type="text" size="mini" @click.stop.prevent="delNode(data,node)">删除</el-button>
+            <el-button v-if="data.id!=-1" type="text" size="mini" @click.stop.prevent="putNode(data,node)">更新</el-button>
           </span>
         </div>
       </template>
@@ -44,13 +44,16 @@ export default {
           // console.log("isLeaf",data,node);
           //算出是否是叶子 true是叶子，false不是🍃
           if (data.id != -1) {
+            // console.log(1111,data,node);
+            // console.log(parseInt((data.rght - data.lft - 1) / 2));
             if (!data.hasOwnProperty("rght")) return true; //如果没有rght属性 则就是叶子节点
             return parseInt((data.rght - data.lft - 1) / 2) == 0;
           }
           return false;
         }
       },
-      loading: false
+      loading: false,
+      expand: true //是否点击任意地方展开
     };
   },
   methods: {
@@ -88,6 +91,7 @@ export default {
     },
     //添加节点
     addNode(data, node) {
+      // this.expand = false;
       console.log(data, node);
       this.$prompt("请输入名字", "插入节点", {
         confirmButtonText: "确定",
@@ -104,21 +108,25 @@ export default {
             let childrenNode = res.data.node;
             let msg = res.data.message;
             this.$refs.tree.append(childrenNode, node); //插入节点
+            node.isLeaf = false; //自己有叶子了，则自己不是叶子
             this.$message({
               type: "success",
               message: msg
             });
             console.log("插入成功", res);
             this.loading = false;
+            // this.expand = true;
           });
         })
         .catch(e => {
+          this.expand = true;
           console.log(e);
         });
     },
     //删除节点
     delNode(data, node) {
-      console.log(data, node);
+      // this.expand = false;
+      // console.log(data, node);
       if (data.id == -1) {
         this.$message({
           type: "warring",
@@ -132,13 +140,16 @@ export default {
           console.log("删除节点", res);
           this.$refs.tree.remove(node);
           this.loading = false;
+          // this.expand = true;
         })
         .catch(e => {
+          // this.expand = true;
           console.log(e);
         });
     },
     //更新节点 更新名字
     putNode(data, node) {
+      // this.expand = false;
       this.$prompt("请输入名字", "修改节点", {
         confirmButtonText: "确定",
         cancelButtonText: "取消"
@@ -149,21 +160,25 @@ export default {
             id: data.id,
             name: value
           };
-          putNode(rep).then(res => {
-            console.log("更新成功");
-            console.log(data.id,data);
-            data.name = value
-            this.$refs.tree.updateKeyChildren(data.id,data)
-            this.$forceUpdate()
-            this.loading = false;
-          }).catch(e=>{
-            this.loading = false
-            console.log(e);
-          })
+          putNode(rep)
+            .then(res => {
+              console.log("更新成功");
+              console.log(data.id, data);
+              data.name = value;
+              this.$refs.tree.updateKeyChildren(data.id, data);
+              this.$forceUpdate();
+              this.loading = false;
+            })
+            .catch(e => {
+              this.loading = false;
+              console.log(e);
+            });
+          // this.expand = true;
         })
         .catch(e => {
-          this.loading = false
-          console.log("取消修改",e);
+          // this.expand = true;
+          this.loading = false;
+          console.log("取消修改", e);
         });
     },
 
@@ -218,9 +233,22 @@ export default {
 </script>
 
 <style lang="less">
-.handle {
-  // background-color: darksalmon;
-  // padding: 0px 3px;
-  margin-left: 30px;
+.row {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  .handle {
+    // background-color: #ccc;
+    padding: 0px 5px;
+    // border-radius: 5px;
+    box-shadow: -2px -2px 2px #ccc inset;
+    line-height: 15px;
+    margin-left: 30px;
+  }
+  .content {
+  }
 }
 </style>