From b64204fd2792d1716000aa281807fa0a72893653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 25 Oct 2017 17:41:37 +0800
Subject: [PATCH] update Tree demo

---
 examples/routers/tree.vue | 238 +++++++++++++++++++++++++++-----------
 1 file changed, 171 insertions(+), 67 deletions(-)

diff --git a/examples/routers/tree.vue b/examples/routers/tree.vue
index 068541f2..d18fb527 100644
--- a/examples/routers/tree.vue
+++ b/examples/routers/tree.vue
@@ -1,94 +1,198 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--<Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>-->
+        <!--<Button @click="handleAdd">add</Button>-->
+        <!--<Button @click="handleUpdate">update</Button>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--baseData: [-->
+                    <!--{-->
+                        <!--expand: true,-->
+                        <!--title: 'parent 1',-->
+                        <!--children: [-->
+                            <!--{-->
+                                <!--title: 'parent 1-0',-->
+                                <!--expand: false,-->
+                                <!--children: [],-->
+                                <!--loading: false-->
+                            <!--},-->
+                            <!--{-->
+                                <!--title: 'parent 1-1',-->
+                                <!--expand: true,-->
+                                <!--checked: true,-->
+                                <!--children: [-->
+                                    <!--{-->
+                                        <!--title: 'leaf',-->
+                                        <!--render: (h, { node }) => {-->
+                                            <!--return h('Button', {-->
+                                                <!--props: {-->
+                                                    <!--type: 'primary',-->
+                                                    <!--size: 'small'-->
+                                                <!--},-->
+                                                <!--on: {-->
+                                                    <!--click: ({target}) => {-->
+                                                        <!--this.logger(target.textContent);-->
+                                                    <!--}-->
+                                                <!--}-->
+                                            <!--}, node.title + '000');-->
+                                        <!--}-->
+                                    <!--}-->
+                                <!--]-->
+                            <!--}-->
+                        <!--]-->
+                    <!--}-->
+                <!--]-->
+            <!--};-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleAdd () {-->
+                <!--this.baseData.push(-->
+                    <!--{-->
+                        <!--title: 'test name',-->
+                        <!--checked: true-->
+                    <!--}-->
+                <!--);-->
+            <!--},-->
+            <!--handleUpdate () {-->
+                <!--const child = this.baseData[0].children[0].children[1];-->
+              <!--//  console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
+                <!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
+                <!--else this.$set(child, 'checked', true);-->
+            <!--},-->
+            <!--logger (txt) {-->
+                <!--console.log(txt);-->
+            <!--},-->
+            <!--loadData (item, callback) {-->
+                <!--setTimeout(() => {-->
+                    <!--callback([-->
+                        <!--{-->
+                            <!--title: 'children-1',-->
+<!--//                            loading: false,-->
+                            <!--children: []-->
+                        <!--},-->
+                        <!--{-->
+                            <!--title: 'children-2',-->
+<!--//                            loading: false,-->
+                            <!--children: []-->
+                        <!--}-->
+                    <!--]);-->
+                <!--}, 2000);-->
+            <!--},-->
+            <!--renderFunc (h, { node }) {-->
+                <!--return h('Button', {-->
+                    <!--props: {-->
+                        <!--type: 'ghost'-->
+                    <!--}-->
+                <!--}, node.title)-->
+            <!--}-->
+        <!--}-->
+    <!--};-->
+<!--</script>-->
+
+
 <template>
-    <div>
-        <Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>
-        <Button @click="handleAdd">add</Button>
-        <Button @click="handleUpdate">update</Button>
+    <div style="width: 400px;">
+        <Tree :data="data4" :render="renderContent"></Tree>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                baseData: [
+                data4: [
                     {
-                        expand: true,
                         title: 'parent 1',
+                        expand: true,
                         children: [
-                            {
-                                title: 'parent 1-0',
-                                expand: false,
-                                children: [],
-                                loading: false
-                            },
                             {
                                 title: 'parent 1-1',
                                 expand: true,
-                                checked: true,
                                 children: [
                                     {
-                                        title: 'leaf',
-                                        render: (h, { node }) => {
-                                            return h('Button', {
-                                                props: {
-                                                    type: 'primary',
-                                                    size: 'small'
-                                                },
-                                                on: {
-                                                    click: ({target}) => {
-                                                        this.logger(target.textContent);
-                                                    }
-                                                }
-                                            }, node.title + '000');
-                                        }
+                                        title: 'leaf 1-1-1',
+                                        expand: true
+                                    },
+                                    {
+                                        title: 'leaf 1-1-2',
+                                        expand: true
+                                    }
+                                ]
+                            },
+                            {
+                                title: 'parent 1-2',
+                                expand: true,
+                                children: [
+                                    {
+                                        title: 'leaf 1-2-1',
+                                        expand: true
+                                    },
+                                    {
+                                        title: 'leaf 1-2-1',
+                                        expand: true
                                     }
                                 ]
                             }
                         ]
                     }
-                ]
-            };
+                ],
+                buttonProps: {
+                    type: 'ghost',
+                    size: 'small',
+                }
+            }
         },
         methods: {
-            handleAdd () {
-                this.baseData.push(
-                    {
-                        title: 'test name',
-                        checked: true
+            renderContent (h, { node }) {
+                return h('span', {
+                    style: {
+                        display: 'inline-block',
+                        width: '100%'
                     }
-                );
-            },
-            handleUpdate () {
-                const child = this.baseData[0].children[0].children[1];
-              //  console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));
-                if (!child) return this.$Message.error('Node is async and is not loaded yet');
-                else this.$set(child, 'checked', true);
-            },
-            logger (txt) {
-                console.log(txt);
-            },
-            loadData (item, callback) {
-                setTimeout(() => {
-                    callback([
-                        {
-                            title: 'children-1',
-//                            loading: false,
-                            children: []
-                        },
-                        {
-                            title: 'children-2',
-//                            loading: false,
-                            children: []
+                }, [
+                    h('span', node.title),
+                    h('span', {
+                        style: {
+                            display: 'inline-block',
+                            float: 'right',
+                            marginRight: '32px'
                         }
-                    ]);
-                }, 2000);
+                    }, [
+                        h('Button', {
+                            props: Object.assign({}, this.buttonProps, {
+                                icon: 'ios-plus-empty'
+                            }),
+                            style: {
+                                marginRight: '8px'
+                            },
+                            on: {
+                                click: () => { this.append(node) }
+                            }
+                        }),
+                        h('Button', {
+                            props: Object.assign({}, this.buttonProps, {
+                                icon: 'ios-minus-empty'
+                            }),
+                            on: {
+                                click: () => { this.remove(node) }
+                            }
+                        })
+                    ])
+                ]);
             },
-            renderFunc (h, { node }) {
-                return h('Button', {
-                    props: {
-                        type: 'ghost'
-                    }
-                }, node.title)
+            append (node) {
+                this.$set(node, 'children', [{
+                    title: 'appended node',
+                    expand: true
+                }]);
+            },
+            remove (node) {
+                const parent = node.parent;
+                console.log(node);
             }
         }
-    };
-</script>
+    }
+</script>
\ No newline at end of file