实现tree练习最基本祖父级的数据获取

src/api/treeDemo.js

@@ -0,0 +1,10 @@
+import request from '@/utils/axios'
+
+// 登入接口
+export function getTreeDemoData(parent) {
+    return request({
+        url: '/tree/',
+        method: 'get',
+        params: parent
+    })
+}

src/router/index.js

@@ -23,7 +23,7 @@ export const constantRoutes = [
         path: '/tree',
         name: 'treeWork',
         title: 'Tree树形控件',
-        component: () => import('@/views/report/report')
+        component: () => import('@/views/treeDemo/tree')
     }
 ]
 

src/views/treeDemo/tree.vue

@@ -0,0 +1,35 @@
+<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>
+      </span>
+    </span>
+  </el-tree>
+</template>
+
+<script>
+import { getTreeDemoData } from "@/api/treeDemo";
+export default {
+  name: "tree_demo",
+  data() {
+    return {
+      data: []
+    };
+  },
+  created() {
+    getTreeDemoData().then(res => {
+      console.log(res);
+      this.data = res.data;
+    });
+  },
+  methods: {
+    append: function(node, data) {},
+    replace: function(node, data) {},
+    remove: function(node, data) {}
+  }
+};
+</script>