修改了左边的栏为树状结构

Signed-off-by: Nxiesi <305492881@qq.com>

README.md

-# x_modellibrary
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# 业务
+
+1. 可以创建模型
+1. 模型是有版本号的
+1. 左侧的列表为模型的类型
+1. 也就是说每个模型至少有一个类型
+1. 左侧列表是一个可以添加的二级树状列表
+
+# todo-list
+ 
+1. 左侧列表可以添加大的列表
+1. 左侧列表可以添加小的列表
+1. 对应的内容可以保存到数据库
\ No newline at end of file

src/views/Home.vue

@@ -2,15 +2,14 @@
   <router-view />
   <el-container style="height: 100%">
     <el-aside width="200px" style="overflow-x: hidden">
-      <el-menu>
-        <el-submenu index="1">
-          <template #title
-            ><i class="el-icon-message"> </i><span> 大分类A</span></template
-          >
-          <el-menu-item index="1-1">A.小分类a</el-menu-item>
-          <el-menu-item index="1-2">A.小分类b</el-menu-item>
-        </el-submenu>
-      </el-menu>
+      <el-tree
+        :data="treedata"
+        node-key="1024"
+        default-expand-all
+        :expand-on-click-node="false"
+        :render-content="renderContent"
+      >
+      </el-tree>
     </el-aside>
     <el-aside
       style="
@@ -72,6 +71,47 @@ export default {
     LoadFBX,
   },
   methods: {
+    append(data) {
+      const newChild = { id: this.treeid++, label: "hello", children: [] };
+      if (!data.children) {
+        data.children = [];
+      }
+      data.children.push(newChild);
+      this.data = [...this.data];
+    },
+    renderContent(h, { node, data }) {
+      if (data.canadd) {
+        return h(
+          "span",
+          {
+            class: "custom-tree-node",
+          },
+          h("span", null, node.label),
+          h(
+            "span",
+            null,
+            h(
+              "a",
+              {
+                onClick: () => {
+                  this.append(data);
+                },
+              },
+              "+ "
+            )
+          )
+        );
+      } else {
+        return h(
+          "span",
+          {
+            class: "custom-tree-node",
+          },
+          h("span", null, node.label)
+        );
+      }
+    },
+
     gotologin11() {
       console.log("goto login");
       this.$router.push("Login");
@@ -128,6 +168,27 @@ export default {
       fbxnamelist: ["a.fbx", "b.fbx", "Samba Dancing.fbx"], // ! fbx列表,用于测试,后续会删掉
       curefbxname: "a.fbx", // 当前的fbx名称,用于传参用
       count: 0, // ! 一个索引,所随着点击次数增加,使用的时候要取余,在正式代码中会删掉
+      treeid: 1000,
+      treedata: [
+        {
+          id: 1,
+          label: "一级1",
+          canadd: true,
+          children: [
+            { id: 2, label: "二级1", canadd: false },
+            { id: 3, label: "二级2", canadd: false },
+          ],
+        },
+        {
+          id: 4,
+          label: "一级2",
+          canadd: true,
+          children: [
+            { id: 5, label: "二级3", canadd: false },
+            { id: 6, label: "二级4", canadd: false },
+          ],
+        },
+      ],
     };
   },
 };