Merge pull request iview#2184 from SergioCrisostomo/fix-tree-examples

fix dom rendering when adding new nodes in example

examples/routers/tree.vue

@@ -34,19 +34,19 @@
                                                     size: 'small'
                                                 },
                                                 on: {
-                                                    click: () => {
-                                                        this.cc();
+                                                    click: ({target}) => {
+                                                        this.logger(target.textContent);
                                                     }
                                                 }
-                                            }, '我是按钮')
+                                            }, 'I\'m a button!');
                                         }
                                     }
                                 ]
                             }
                         ]
                     }
                 ]
-            }
+            };
         },
         methods: {
             handleAdd () {
@@ -55,18 +55,20 @@
                         title: 'test name',
                         checked: true
                     }
-                )
+                );
             },
             handleUpdate () {
-                this.$set(this.baseData[0].children[0].children[1], 'checked', true);
+                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);
             },
-            cc () {
-                console.log(99)
+            logger (txt) {
+                console.log(txt);
             },
             loadData (item, callback) {
-                item.loading = true;
                 setTimeout(() => {
-                    item.children = [
+                    callback([
                         {
                             title: 'children-1',
                             loading: false,
@@ -77,11 +79,9 @@
                             loading: false,
                             children: []
                         }
-                    ];
-                    item.loading = false;
-                    callback();
+                    ]);
                 }, 2000);
             }
         }
-    }
+    };
 </script>

src/components/tree/node.vue

@@ -16,8 +16,8 @@
                 <span v-else :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
                 <Tree-node
                         v-if="data.expand"
-                        v-for="item in data.children"
-                        :key="item.nodeKey"
+                        v-for="(item, i) in data.children"
+                        :key="i"
                         :data="item"
                         :multiple="multiple"
                         :show-checkbox="showCheckbox">
@@ -60,6 +60,9 @@
             return {
                 prefixCls: prefixCls
             };
+        },
+        watch: {
+
         },
         computed: {
             classes () {
@@ -104,12 +107,15 @@
                 if (item.disabled) return;
 
                 // async loading
-                if (item.loading !== undefined && !item.children.length) {
+                if (item.children.length === 0) {
                     const tree = findComponentUpward(this, 'Tree');
                     if (tree && tree.loadData) {
-                        tree.loadData(item, () => {
-                            if (item.children.length) {
-                                this.handleExpand(item);
+                        this.$set(this.data, 'loading', true);
+                        tree.loadData(item, children => {
+                            this.$set(this.data, 'loading', false);
+                            if (children.length) {
+                                this.$set(this.data, 'children', children);
+                                this.$nextTick(() => this.handleExpand());
                             }
                         });
                         return;

src/components/tree/tree.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="prefixCls">
         <Tree-node
-            v-for="item in stateTree"
-            :key="item.nodeKey"
+            v-for="(item, i) in stateTree"
+            :key="i"
             :data="item"
             visible
             :multiple="multiple"