refactor(Tree): Migration Project Folder

packages/element3/src/index.js

@@ -42,7 +42,7 @@ import ElTable from '../packages/table'
 import ElTableColumn from '../packages/table-column'
 import { ElTag } from './components/Tag'
 import { ElProgress } from './components/Progress'
-import ElTree from '../packages/tree'
+import { ElTree } from './components/Tree'
 import ElPagination from '../packages/pagination'
 import { ElBadge } from './components/Badge'
 import { ElAvatar } from './components/Avatar'

packages/website/src/play/index.vue

@@ -1,25 +1,169 @@
 <template>
-  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
-    <el-radio-button label="top">top</el-radio-button>
-    <el-radio-button label="right">right</el-radio-button>
-    <el-radio-button label="bottom">bottom</el-radio-button>
-    <el-radio-button label="left">left</el-radio-button>
-  </el-radio-group>
-
-  <el-tabs :tab-position="tabPosition" style="height: 200px">
-    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
-    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
-    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
-    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
-  </el-tabs>
+  <el-tree v-model="nodes.value"></el-tree>
 </template>
+
 <script>
-import { defineComponent } from 'vue'
-export default defineComponent({
-  data() {
+import { getCurrentInstance, reactive, ref } from 'vue'
+export default {
+  // data() {
+  //   return {
+  //     data: [
+  //       {
+  //         label: '一级 1',
+  //         children: [
+  //           {
+  //             label: '二级 1-1',
+  //             children: [
+  //               {
+  //                 label: '三级 1-1-1'
+  //               }
+  //             ]
+  //           }
+  //         ]
+  //       },
+  //       {
+  //         label: '一级 2',
+  //         children: [
+  //           {
+  //             label: '二级 2-1',
+  //             children: [
+  //               {
+  //                 label: '三级 2-1-1'
+  //               }
+  //             ]
+  //           },
+  //           {
+  //             label: '二级 2-2',
+  //             children: [
+  //               {
+  //                 label: '三级 2-2-1'
+  //               }
+  //             ]
+  //           }
+  //         ]
+  //       },
+  //       {
+  //         label: '一级 3',
+  //         children: [
+  //           {
+  //             label: '二级 3-1',
+  //             children: [
+  //               {
+  //                 label: '三级 3-1-1'
+  //               }
+  //             ]
+  //           },
+  //           {
+  //             label: '二级 3-2',
+  //             children: [
+  //               {
+  //                 label: '三级 3-2-1'
+  //               }
+  //             ]
+  //           }
+  //         ]
+  //       }
+  //     ],
+  //     defaultProps: {
+  //       children: 'children',
+  //       label: 'label'
+  //     }
+  //   }
+  // },
+  // methods: {
+  //   handleNodeClick(data) {
+  //     console.log(data)
+  //   }
+  // },
+  // mounted() {
+  //   setTimeout(() => {
+  //     this.data.push({
+  //       label: 'Hello'
+  //     })
+  //   }, 1000)
+  // },
+  setup() {
+    const vm = getCurrentInstance().proxy
+
+    function reft(v) {
+      return {
+        value: v
+      }
+    }
+
+    const nodes = reft([
+      {
+        label: '一级 1',
+        children: [
+          {
+            label: '二级 1-1',
+            children: [
+              {
+                label: '三级 1-1-1'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '一级 2',
+        children: [
+          {
+            label: '二级 2-1',
+            children: [
+              {
+                label: '三级 2-1-1'
+              }
+            ]
+          },
+          {
+            label: '二级 2-2',
+            children: [
+              {
+                label: '三级 2-2-1'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '一级 3',
+        children: [
+          {
+            label: '二级 3-1',
+            children: [
+              {
+                label: '三级 3-1-1'
+              }
+            ]
+          },
+          {
+            label: '二级 3-2',
+            children: [
+              {
+                label: '三级 3-2-1'
+              }
+            ]
+          }
+        ]
+      }
+    ])
+
+    setTimeout(() => {
+      console.log(nodes, vm.nodes)
+      nodes.value[0].label = 'TTT'
+      nodes.value[0].children[0].label = 'TTT'
+      nodes.value.push({
+        label: 'Hello'
+      })
+      nodes.value[0].children.push({
+        label: 'Hello'
+      })
+    }, 3000)
+
     return {
-      tabPosition: 'top'
+      nodes
     }
   }
-})
+}
 </script>