Demo update to add programmatic control of tree

src/views/tree/TreeDemo.vue

@@ -8,7 +8,15 @@
         </div>
 
         <div class="content-section implementation">
+            <h3>Basic</h3>
             <Tree :value="nodes"></Tree>
+
+            <h3>Programmatic Control</h3>
+            <div style="margin-bottom: 1em">
+                <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+            </div>
+            <Tree :value="nodes" :expandedKeys="expandedKeys"></Tree>            
         </div>
 
         <TreeDoc />
@@ -21,7 +29,8 @@ import TreeDoc from './TreeDoc';
 export default {
     data() {
         return {
-            nodes: null
+            nodes: null,
+            expandedKeys: {}
         }
     },
     nodeService: null,
@@ -31,8 +40,34 @@ export default {
     mounted() {
         this.nodeService.getTreeNodes().then(data => this.nodes = data);
     },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {...this.expandedKeys};
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            this.expandedKeys[node.key] = true;
+            if (node.children && node.children.length) {
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    },
     components: {
         'TreeDoc': TreeDoc
     }
 }
 </script>
+
+<style scoped>
+button {
+    margin-right: .5em;
+}
+</style>