Tree add async loading

examples/routers/tree.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Tree :data="baseData" show-checkbox multiple></Tree>
+        <Tree :data="baseData" :load-data="loadData" show-checkbox multiple></Tree>
         <Button @click="handleAdd">add</Button>
         <Button @click="handleUpdate">update</Button>
     </div>
@@ -16,18 +16,9 @@
                         children: [
                             {
                                 title: 'parent 1-0',
-                                expand: true,
+                                expand: false,
-                                disabled: true,
+                                children: [],
-                                children: [
+                                loading: false
-                                    {
-                                        title: 'leaf',
-                                        disableCheckbox: true
-                                    },
-                                    {
-                                        title: 'leaf',
-                                        checked: false
-                                    }
-                                ]
                             },
                             {
                                 title: 'parent 1-1',
@@ -71,6 +62,25 @@
             },
             cc () {
                 console.log(99)
+            },
+            loadData (item, callback) {
+                item.loading = true;
+                setTimeout(() => {
+                    item.children = [
+                        {
+                            title: 'children-1',
+                            loading: false,
+                            children: []
+                        },
+                        {
+                            title: 'children-2',
+                            loading: false,
+                            children: []
+                        }
+                    ];
+                    item.loading = false;
+                    callback();
+                }, 2000);
             }
         }
     }

src/components/tree/node.vue

@@ -3,7 +3,8 @@
         <ul :class="classes">
             <li>
                 <span :class="arrowClasses" @click="handleExpand">
-                    <Icon type="arrow-right-b"></Icon>
+                    <Icon v-if="showArrow" type="arrow-right-b"></Icon>
+                    <Icon v-if="showLoading" type="load-c" class="ivu-load-loop"></Icon>
                 </span>
                 <Checkbox
                         v-if="showCheckbox"
@@ -31,6 +32,7 @@
     import Render from '../base/render';
     import CollapseTransition from '../base/collapse-transition';
     import Emitter from '../../mixins/emitter';
+    import { findComponentUpward } from '../../utils/assist';
 
     const prefixCls = 'ivu-tree';
 
@@ -77,8 +79,7 @@
                     `${prefixCls}-arrow`,
                     {
                         [`${prefixCls}-arrow-disabled`]: this.data.disabled,
-                        [`${prefixCls}-arrow-open`]: this.data.expand,
+                        [`${prefixCls}-arrow-open`]: this.data.expand
-                        [`${prefixCls}-arrow-hidden`]: !(this.data.children && this.data.children.length)
                     }
                 ];
             },
@@ -89,13 +90,36 @@
                         [`${prefixCls}-title-selected`]: this.data.selected
                     }
                 ];
+            },
+            showArrow () {
+                return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading);
+            },
+            showLoading () {
+                return 'loading' in this.data && this.data.loading;
             }
         },
         methods: {
             handleExpand () {
-                if (this.data.disabled) return;
+                const item = this.data;
-                this.$set(this.data, 'expand', !this.data.expand);
+                if (item.disabled) return;
-                this.dispatch('Tree', 'toggle-expand', this.data);
+
+                // async loading
+                if (item.loading !== undefined && !item.children.length) {
+                    const tree = findComponentUpward(this, 'Tree');
+                    if (tree && tree.loadData) {
+                        tree.loadData(item, () => {
+                            if (item.children.length) {
+                                this.handleExpand(item);
+                            }
+                        });
+                        return;
+                    }
+                }
+
+                if (item.children && item.children.length) {
+                    this.$set(this.data, 'expand', !this.data.expand);
+                    this.dispatch('Tree', 'toggle-expand', this.data);
+                }
             },
             handleSelect () {
                 if (this.data.disabled) return;

src/components/tree/tree.vue

@@ -39,6 +39,9 @@
             },
             emptyText: {
                 type: String
+            },
+            loadData: {
+                type: Function
             }
         },
         data () {

src/styles/components/tree.less

@@ -49,12 +49,12 @@
                 transform: rotate(90deg);
             }
         }
-        &-hidden{
+        //&-hidden{
-            cursor: auto;
+        //    cursor: auto;
-            i{
+        //    i{
-                display: none;
+        //        display: none;
-            }
+        //    }
-        }
+        //}
         &-disabled{
             cursor: @cursor-disabled;
         }