树控件练习的curd

src/views/treeDemo/tree.vue

@@ -1,35 +1,132 @@
 <template>
-  <el-tree :data="data" lazy node-key="id">
-    <span slot-scope="{ node, data }">
-      <span>{{ data.name }}</span>
-      <span>
-        <el-button type="text" size="mini" @click="append(node,data)">新增</el-button>
-        <el-button type="text" size="mini" @click="replace(node, data)">修改</el-button>
-        <el-button type="text" size="mini" @click="remove(node, data)">删除</el-button>
+  <div>
+    <el-tree
+      :data="data"
+      lazy
+      node-key="id"
+      :load="loadNode"
+      :props="props"
+      :expand-on-click-node="false"
+    >
+      <span slot-scope="{ node, data }">
+        <span>{{ data.name }}</span>
+        <span>
+          <el-button type="text" size="mini" @click="append(node,data)">新增</el-button>
+          <el-button type="text" size="mini" @click="replace(node, data)">修改</el-button>
+          <el-button type="text" size="mini" @click="remove(node, data)">删除</el-button>
+        </span>
       </span>
-    </span>
-  </el-tree>
+    </el-tree>
+    <el-dialog :title="dialog.title" :visible="dialog.visible" @close="handleCancel">
+      <el-form :model="dialog" label-width="120px" ref="form">
+        <el-form-item label="名字" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" prop="name">
+          <el-input v-model="dialog.name" />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmitHandle">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { getTreeDemoData } from "@/api/treeDemo";
+import {
+  getTreeDemoData,
+  deleteTreeDemoData,
+  putTreeDemoData,
+  postTreeDemoData
+} from "@/api/treeDemo";
 export default {
   name: "tree_demo",
   data() {
     return {
-      data: []
+      props: {
+        isLeaf: (data, node) => this.isChi(data, node)
+      },
+      data: [],
+      dialog: {
+        title: "",
+        visible: false,
+        name: "",
+        id: -1,
+        parentId: -1
+      }
     };
   },
-  created() {
-    getTreeDemoData().then(res => {
-      console.log(res);
-      this.data = res.data;
-    });
-  },
   methods: {
-    append: function(node, data) {},
-    replace: function(node, data) {},
-    remove: function(node, data) {}
+    // 处理后端传来的参数  是否有孩子节点和前端的是否为叶子节点判断相反
+    isChi: function(data, node) {
+      return !data.childer;
+    },
+    // 新增按钮
+    append: function(node, data) {
+      this.dialog.title = "新增";
+      this.dialog.visible = true;
+      this.id = -1;
+      this.dialog.parentId = data.parent_id;
+    },
+    // 修改按钮
+    replace: function(node, data) {
+      this.dialog.title = "编辑";
+      this.dialog.name = data.name;
+      this.dialog.id = data.id;
+      this.dialog.visible = true;
+      console.log(data);
+    },
+    // 删除按钮
+    remove: function(node, data) {
+      deleteTreeDemoData({
+        id: data.id
+      }).then(res => {
+        this.$message({
+          message: "删除成功",
+          type: "warning"
+        });
+      });
+    },
+    // 加载子树数据的方法
+    loadNode: function(node, resolve) {
+      getTreeDemoData({
+        parent: node.data.id
+      }).then(res => {
+        return resolve(res.data);
+      });
+    },
+    // 弹窗的取消按钮
+    handleCancel: function() {
+      this.dialog.name = "";
+      this.dialog.visible = false;
+    },
+    // 弹窗的确定按钮
+    dataFormSubmitHandle: function() {
+      if (this.dialog.id == -1) {
+        postTreeDemoData({
+          id: this.dialog.parentId,
+          name: this.dialog.name
+        }).then(res => {
+          this.$message({
+            message: "新增成功",
+            type: "success"
+          });
+        });
+        this.dialog.name = "";
+        this.dialog.visible = false;
+      } else {
+        putTreeDemoData({
+          id: this.dialog.id,
+          name: this.dialog.name
+        }).then(res => {
+          this.$message({
+            message: "更新成功",
+            type: "success"
+          });
+        });
+        this.dialog.name = "";
+        this.dialog.visible = false;
+      }
+    }
   }
 };
 </script>