update tree table async

examples/routers/table.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="margin: 100px;">
-        <Table border ref="selection" :columns="columns5" :data="data2"></Table>
+<!--        <Table border ref="selection" :columns="columns5" :data="data2"></Table>-->
         <Divider></Divider>
         <Table
                 border
@@ -15,12 +15,16 @@
                 ref="selection"
                 :columns="columns4"
                 :data="data1"
-                row-key="id">
+                row-key="id"
+                :load-data="loadData"
+        >
             <template slot-scope="{ row }" slot="age">
                 <strong>{{row.age}}</strong>
             </template>
         </Table>
         <br><br>
+        <Button @click="addData">添加数据</Button>
+        <Button @click="addData2">添加数据2</Button>
         <Button @click="handleSelectAll(true)">Set all selected</Button>
         <Button @click="handleSelectAll(false)">Cancel all selected</Button>
     </div>
@@ -102,7 +106,9 @@
                         address: 'New York No. 1 Lake Park',
                         date: '2016-10-03',
                         _disabled: true,
-                        level: 0
+                        level: 0,
+                        // _loading: false,
+                        // children: []
                     },
                     {
                         id: '101',
@@ -186,17 +192,36 @@
                         address: 'Sydney No. 1 Lake Park',
                         date: '2016-10-02',
                         _disabled: false,
-                        level: 0
+                        level: 0,
+                        _showChildren: true,
+                        children: [
+                            {
+                                id: '10200',
+                                name: '张三3',
+                                age: 235,
+                                address: '发动机莲富大厦放假了开始的',
+                                date: '2016-10-01',
+                                level: 1
+                            },
+                            {
+                                id: '10201',
+                                name: '张三4',
+                                age: 235,
+                                address: '发动机莲富大厦放假了开始的',
+                                date: '2016-10-01',
+                                level: 1
+                            },
+                        ]
                     },
-                    {
+                    // {
-                        id: '103',
+                    //     id: '103',
-                        name: 'Jon Snow',
+                    //     name: 'Jon Snow',
-                        age: 126,
+                    //     age: 126,
-                        address: 'Ottawa No. 2 Lake Park',
+                    //     address: 'Ottawa No. 2 Lake Park',
-                        date: '2016-10-04',
+                    //     date: '2016-10-04',
-                        _disabled: true,
+                    //     _disabled: true,
-                        level: 0
+                    //     level: 0
-                    }
+                    // }
                 ],
                 columns5: [
                     {
@@ -314,6 +339,58 @@
             },
             osac (s) {
                 console.log(s);
+            },
+            loadData (item, callback) {
+                setTimeout(() => {
+                    const data = [
+                        {
+                            id: '10000',
+                            name: '张三1',
+                            age: 123,
+                            address: '1发动机莲富大厦放假了开始的',
+                            date: '2016-10-01'
+                        },
+                        {
+                            id: '10001',
+                            name: '张三2',
+                            age: 124,
+                            address: '2发动机莲富大厦放假了开始的',
+                            date: '2016-10-02'
+                        },
+                    ];
+                    callback(data);
+                }, 100);
+            },
+            addData () {
+                const d = this.data1[3];
+                d.children = [
+                    {
+                        id: '10000',
+                        name: '张三1',
+                        age: 123,
+                        address: '1发动机莲富大厦放假了开始的',
+                        date: '2016-10-01'
+                    },
+                    {
+                        id: '10001',
+                        name: '张三2',
+                        age: 124,
+                        address: '2发动机莲富大厦放假了开始的',
+                        date: '2016-10-02'
+                    }
+                ];
+                this.$set(this.data1, 3, d);
+            },
+            addData2 () {
+                this.data1.push({
+                    id: '104',
+                    name: 'Jon Snow4',
+                    age: 124,
+                    address: 'Ottawa No. 2 Lake Park',
+                    date: '2016-10-04',
+                    _disabled: true,
+                    level: 0
+                })
             }
         }
     }

src/components/table/cell.vue

@@ -5,8 +5,9 @@
             <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <div class="ivu-table-cell-tree-level" v-if="showLevel" :style="treeLevelStyle"></div>
-        <div class="ivu-table-cell-tree" v-if="showChildren" @click="handleToggleTree">
+        <div class="ivu-table-cell-tree" :class="{ 'ivu-table-cell-tree-loading': childrenLoading }" v-if="showChildren" @click.prevent.stop="handleToggleTree">
-            <Icon type="ios-add" v-if="!childrenExpand" />
+            <Icon type="ios-loading" v-if="childrenLoading" class="ivu-load-loop" />
+            <Icon type="ios-add" v-else-if="!childrenExpand" />
             <Icon type="ios-remove" v-else />
         </div>
         <div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div>
@@ -101,7 +102,7 @@
                 let status = false;
                 if (this.renderType === 'html' || this.renderType === 'normal' || this.renderType === 'render' || this.renderType === 'slot') {
                     const data = this.row;
-                    if ((data.children && data.children.length) || ('_loading' in data && data._loading)) {
+                    if ((data.children && data.children.length) || ('_loading' in data)) {
                         if (this.column.tree) status = true;
                     }
                 }
@@ -129,6 +130,10 @@
             childrenExpand () {
                 const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
                 return data._isShowChildren;
+            },
+            childrenLoading () {
+                const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
+                return '_loading' in data && data._loading;
             }
         },
         methods: {

src/components/table/table.vue

@@ -262,6 +262,10 @@
             indentSize: {
                 type: Number,
                 default: 16
+            },
+            // 4.1.0
+            loadData: {
+                type: Function
             }
         },
         data () {
@@ -784,6 +788,23 @@
             },
             toggleTree (rowKey) {
                 const data = this.getDataByRowKey(rowKey);
+                // async loading
+                if ('_loading' in data && data._loading) return;
+                if ('_loading' in data && !data._loading && data.children.length === 0) {
+                    const sourceData = this.getBaseDataByRowKey(rowKey, this.data);
+                    this.$set(sourceData, '_loading', true);
+                    this.loadData(sourceData, children => {
+                        this.$set(sourceData, '_loading', false);
+                        if (children.length) {
+                            // todo
+                            this.$set(sourceData, 'children', children);
+                            const data2 = this.getDataByRowKey(rowKey);
+                            data2._isShowChildren = !data2._isShowChildren;
+                        }
+                    });
+                    return;
+                }
+
                 data._isShowChildren = !data._isShowChildren;
             },
             getDataByRowKey (rowKey, objData = this.objData) {

src/styles/components/table.less

@@ -275,6 +275,15 @@
                 border-color: transparent;
             }
 
+            &-loading{
+                cursor: default;
+                background-color: transparent;
+                border-color: transparent;
+                &:hover{
+                    border-color: transparent;
+                }
+            }
+
             &-level{
                 display: inline-block;
                 height: 16px;