update Table Tree

examples/routers/table.vue

@@ -45,6 +45,7 @@
                         age: 24,
                         address: 'London No. 1 Lake Park',
                         date: '2016-10-01',
+                        _showChildren: false,
                         children: [
                             {
                                 name: '张三',

src/components/table/cell.vue

@@ -5,9 +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">
+        <div class="ivu-table-cell-tree" v-if="showChildren" @click="handleToggleTree">
-            <Icon type="ios-add" v-if="!row._isShowChildren" @click="handleOpenTree" />
+            <Icon type="ios-add" v-if="!row._isShowChildren" />
-            <Icon type="ios-remove" v-else @click="handleCloseTree" />
+            <Icon type="ios-remove" v-else />
         </div>
         <div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div>
         <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
@@ -150,11 +150,8 @@
             handleTooltipHide () {
                 this.tooltipShow = false;
             },
-            handleOpenTree () {
+            handleToggleTree () {
-
+                this.$parent.$parent.$parent.toggleTree(this.row._rowKey);
-            },
-            handleCloseTree () {
-
             }
         },
         created () {

src/components/table/table-body.vue

@@ -95,6 +95,10 @@
             rowExpanded (_index) {
                 return this.objData[_index] && this.objData[_index]._isExpanded;
             },
+            // todo
+            rowShowChildren (_index) {
+                return this.objData[_index] && this.objData[_index]._isShowChildren;
+            },
             handleMouseIn (_index, event) {
                 event.stopPropagation();
                 this.$parent.handleMouseIn(_index);
@@ -172,12 +176,18 @@
                             }
                         });
 
+                        // 判断节点是否展开
+                        const trStyle = {};
+                        // todo
+                        if (!this.rowShowChildren(row._index)) trStyle.display = 'none';
+
                         const $tableTr = h(TableTr, {
                             props: {
                                 draggable: false,
                                 row: row,
                                 'prefix-cls': this.prefixCls
                             },
+                            style: trStyle,
                             key: this.rowKey ? row._rowKey : index,
                             nativeOn: {
                                 mouseenter: (e) => this.handleMouseIn(row._index, e),

src/components/table/table.vue

@@ -693,6 +693,36 @@
                     this.$nextTick(()=>this.fixedBody());
                 }
             },
+            toggleTree (rowKey) {
+                const data = this.getDataByRowKey(rowKey);
+                data._isShowChildren = !data._isShowChildren;
+            },
+            getDataByRowKey (rowKey, objData = this.rebuildData) {
+                let data = null;
+                for (let i in objData) {
+                    const thisData = objData[i];
+                    if (thisData._rowKey === rowKey) {
+                        data = thisData;
+                        break;
+                    } else if (thisData.children && thisData.children.length) {
+                        data = this.getChildrenByRowKey(rowKey, thisData);
+                    }
+                }
+                return data;
+            },
+            getChildrenByRowKey (rowKey, objData) {
+                let data = null;
+                if (objData.children && objData.children.length) {
+                    objData.children.forEach(item => {
+                        if (item._rowKey === rowKey) {
+                            data = item;
+                        } else if (item.children && item.children.length) {
+                            data = this.getChildrenByRowKey(rowKey, item);
+                        }
+                    });
+                }
+                return data;
+            },
             selectAll (status) {
                 // this.rebuildData.forEach((data) => {
                 //     if(this.objData[data._index]._isDisabled){
@@ -931,6 +961,11 @@
                     row._index = index;
                     row._rowKey = rowKey++;
                     if (row.children && row.children.length) {
+                        if (row._showChildren) {
+                            row._isShowChildren = row._showChildren;
+                        } else {
+                            row._isShowChildren = false;
+                        }
                         row.children = this.makeChildrenData(row);
                     }
                 });
@@ -942,6 +977,11 @@
                         const newRow = deepCopy(row);
                         newRow._index = index;
                         newRow._rowKey = rowKey++;
+                        if (newRow._showChildren) {
+                            newRow._isShowChildren = newRow._showChildren;
+                        } else {
+                            newRow._isShowChildren = false;
+                        }
                         if (newRow.children && newRow.children.length) {
                             newRow.children = this.makeChildrenData(newRow);
                         }
@@ -1008,11 +1048,12 @@
                 this.data.forEach((row, index) => {
                     const newRow = this.makeObjBaseData(row);
                     if (newRow.children && newRow.children.length) {
-                        if (newRow._showChildren) {
+                        // todo 这里不在 objData 设置 _isShowChildren 了，改在 rebuildData，否则拿不到 rowKey
-                            newRow._isShowChildren = newRow._showChildren;
+                        // if (newRow._showChildren) {
-                        } else {
+                        //     newRow._isShowChildren = newRow._showChildren;
-                            newRow._isShowChildren = false;
+                        // } else {
-                        }
+                        //     newRow._isShowChildren = false;
+                        // }
                         newRow.children = this.makeChildrenObjData(newRow);
                     }
                     data[index] = newRow;