堆详情

src/components/JHeapDetail.vue

@@ -1,12 +1,39 @@
 <template>
-  <div>堆区详情</div>
+  <div>
+    <div>堆区详情</div>
+    <v-treeview :items="items"></v-treeview>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'JHeapDetail',
-  prop: {
+  props: {
     data: Object
+  },
+  computed: {
+    items() {
+      if (!this.data) return []
+
+      const { id, members = {} } = this.data
+      const splitId = id.split('@')
+      const name = splitId.length > 0 ? splitId[0] : id
+      return [{
+        id: 1,
+        name: id,
+        children: [
+          { id: 2, name: `名字: ${name}` },
+          {
+            id: 3,
+            name: '属性',
+            children: Object.keys(members).map((memberName, index) => ({
+              id: index + 3,
+              name: `${memberName} : ${members[memberName]}`
+            }))
+          }
+        ]
+      }]
+    }
   }
 }
 </script>