From 7f34c510307215cc599a2ba86d638570e16e0fe5 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Sat, 26 Nov 2016 08:57:09 +0800
Subject: [PATCH] update Table

---
 src/components/table/cell.vue       | 23 +++++++++++++----------
 src/components/table/table-body.vue | 60 ++++++++++++++++++++++++++++++++++++++++++++++++------------
 src/components/table/table-head.vue | 37 +++++++++++++++++++++----------------
 src/components/table/table.vue      | 91 +++++++++++++++++++++++++++++++++++++++++--------------------------------------------------
 src/styles/components/table.less    | 25 +++++++++++++++++++++++++
 test/routers/table.vue              |  2 +-
 6 files changed, 149 insertions(+), 89 deletions(-)

diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 15be5a7..e31c6a6 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -17,7 +17,8 @@
             row: Object,
             column: Object,
             index: Number,
-            checked: Boolean
+            checked: Boolean,
+            fixed: Boolean
         },
         data () {
             return {
@@ -30,7 +31,7 @@
                 return [
                     `${this.prefixCls}-cell`,
                     {
-                        [`${this.prefixCls}-hidden`]: this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
+                        [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
                     }
                 ]
             }
@@ -38,29 +39,31 @@
         methods: {
             compile () {
                 if (this.column.render) {
+                    const $parent = this.$parent.$parent.$parent;
                     const template = this.column.render(this.row, this.column, this.index);
                     const cell = document.createElement('div');
                     cell.innerHTML = template;
-                    const _oldParentChildLen = this.$parent.$parent.$children.length;
-                    this.$parent.$parent.$compile(cell);
-                    const _newParentChildLen = this.$parent.$parent.$children.length;
+                    const _oldParentChildLen = $parent.$children.length;
+                    $parent.$compile(cell);
+                    const _newParentChildLen = $parent.$children.length;
 
                     if (_oldParentChildLen !== _newParentChildLen) {    // if render normal html node, do not tag
-                        this.uid = this.$parent.$parent.$children[this.$parent.$parent.$children.length - 1]._uid;    // tag it, and delete when data or columns update
+                        this.uid = $parent.$children[$parent.$children.length - 1]._uid;    // tag it, and delete when data or columns update
                     }
                     this.$el.innerHTML = '';
                     this.$el.appendChild(cell);
                 }
             },
             destroy () {
-                for (let i = 0; i < this.$parent.$parent.$children.length; i++) {
-                    if (this.$parent.$parent.$children[i]._uid === this.uid) {
-                        this.$parent.$parent.$children[i].$destroy();
+                const $parent = this.$parent.$parent.$parent;
+                for (let i = 0; i < $parent.$children.length; i++) {
+                    if ($parent.$children[i]._uid === this.uid) {
+                        $parent.$children[i].$destroy();
                     }
                 }
             },
             toggleSelect (index) {
-                this.$parent.toggleSelect(index);
+                this.$parent.$parent.toggleSelect(index);
             }
         },
         compiled () {
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index 080ffc4..af99b5e 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -1,23 +1,59 @@
 <template>
-    <table cellspacing="0" cellpadding="0" border="0">
-
+    <table cellspacing="0" cellpadding="0" border="0" :style="style">
+        <colgroup>
+            <col v-for="column in columns" :width="setCellWidth(column, $index)">
+        </colgroup>
+        <tbody :class="[prefixCls + '-tbody']">
+            <tr
+                v-for="(index, row) in data"
+                :class="[prefixCls + '-row', rowClsName(index), {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight, [prefixCls + '-row-hover']: cloneData[index] && cloneData[index]._isHover}]"
+                @mouseenter.stop="handleMouseIn(index)"
+                @mouseleave.stop="handleMouseOut(index)"
+                @click.stop="highlightCurrentRow(index)">
+                <td v-for="column in columns" :class="alignCls(column)">
+                    <Cell
+                        :fixed="fixed"
+                        :prefix-cls="prefixCls"
+                        :row="row"
+                        :column="column"
+                        :index="index"
+                        :checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
+                </td>
+            </tr>
+        </tbody>
     </table>
 </template>
 <script>
+    import Cell from './cell.vue';
+    import Mixin from './mixin';
+
     export default {
+        mixins: [ Mixin ],
+        components: { Cell },
         props: {
-        
-        },
-        data () {
-            return {
-            
-            }
-        },
-        computed: {
-        
+            prefixCls: String,
+            style: Object,
+            columns: Array,
+            data: Array,
+            cloneData: Array,
+            fixed: Boolean
         },
         methods: {
-        
+            setCellWidth (column, index) {
+                return this.$parent.setCellWidth(column, index);
+            },
+            rowClsName (index) {
+                return this.$parent.rowClassName(this.data[index], index);
+            },
+            handleMouseIn (index) {
+                this.$parent.handleMouseIn(index);
+            },
+            handleMouseOut (index) {
+                this.$parent.handleMouseOut(index);
+            },
+            highlightCurrentRow (index) {
+                this.$parent.highlightCurrentRow(index);
+            }
         }
     }
 </script>
\ No newline at end of file
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 7761338..dfd85c0 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -1,14 +1,19 @@
 <template>
-    <thead>
-        <tr>
-            <th v-for="column in columns" :class="alignCls(column)">
-                <div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]">
-                    <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
-                    <template v-else>{{{ renderHeader(column, $index) }}}</template>
-                </div>
-            </th>
-        </tr>
-    </thead>
+    <table cellspacing="0" cellpadding="0" border="0" :style="style">
+        <colgroup>
+            <col v-for="column in columns" :width="setCellWidth(column, $index)">
+        </colgroup>
+        <thead>
+            <tr>
+                <th v-for="column in columns" :class="alignCls(column)">
+                    <div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: !fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]">
+                        <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
+                        <template v-else>{{{ renderHeader(column, $index) }}}</template>
+                    </div>
+                </th>
+            </tr>
+        </thead>
+    </table>
 </template>
 <script>
     import Checkbox from '../checkbox/checkbox.vue';
@@ -20,13 +25,10 @@
         components: { Checkbox },
         props: {
             prefixCls: String,
+            style: Object,
             columns: Array,
-            cloneData: Array
-        },
-        data () {
-            return {
-            
-            }
+            cloneData: Array,
+            fixed: Boolean
         },
         computed: {
             isSelectAll () {
@@ -34,6 +36,9 @@
             }
         },
         methods: {
+            setCellWidth (column, index) {
+                return this.$parent.setCellWidth(column, index);
+            },
             renderHeader (column, $index) {
                 if ('renderHeader' in this.columns[$index]) {
                     return this.columns[$index].renderHeader(column, $index);
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 33a96cb..943dea0 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -2,70 +2,51 @@
     <div :class="classes" :style="styles">
         <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
         <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
-            <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
-                <colgroup>
-                    <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
-                </colgroup>
-                <thead
-                    is="table-head"
-                    :prefix-cls="prefixCls"
-                    :clone-data.sync="cloneData"
-                    :columns="cloneColumns"></thead>
-            </table>
+            <table-head
+                :prefix-cls="prefixCls"
+                :style="tableStyle"
+                :columns="cloneColumns"
+                :clone-data="cloneData"></table-head>
         </div>
         <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
-            <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
-                <colgroup>
-                    <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
-                </colgroup>
-                <tbody :class="[prefixCls + '-tbody']" v-el:render>
-                    <tr
-                        v-for="(index, row) in data"
-                        :class="[prefixCls + '-row', rowClsName(index), {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight, [prefixCls + '-row-hover']: cloneData[index] && cloneData[index]._isHover}]"
-                        @mouseenter.stop="handleMouseIn(index)"
-                        @mouseleave.stop="handleMouseOut(index)"
-                        @click.stop="highlightCurrentRow(index)">
-                        <td v-for="column in cloneColumns" :class="alignCls(column)">
-                            <Cell
-                                :prefix-cls="prefixCls"
-                                :row="row"
-                                :column="column"
-                                :index="index"
-                                :checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+            <table-body
+                v-ref:tbody
+                :prefix-cls="prefixCls"
+                :style="tableStyle"
+                :columns="cloneColumns"
+                :data="data"
+                :clone-data="cloneData"></table-body>
         </div>
         <div :class="[prefixCls + '-fixed']">
-            <table cellspacing="0" cellpadding="0" border="0">
-                <colgroup>
-                    <col v-for="column in leftFixedColumns" :width="setCellWidth(column, $index)">
-                </colgroup>
-                <tbody :class="[prefixCls + '-tbody']">
-                    <tr>
-
-                    </tr>
-                </tbody>
-            </table>
+            <!--todo设置个div头部-->
+            <table-body
+                fixed
+                :prefix-cls="prefixCls"
+                :style="fixedTableStyle"
+                :columns="leftFixedColumns"
+                :data="data"
+                :clone-data="cloneData"></table-body>
         </div>
         <div :class="[prefixCls + '-fixed-right']">
-
+            <table-body
+                fixed
+                :prefix-cls="prefixCls"
+                :style="fixedRightTableStyle"
+                :columns="rightFixedColumns"
+                :data="data"
+                :clone-data="cloneData"></table-body>
         </div>
         <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
     </div>
 </template>
 <script>
-    import TableHead from './table-head.vue';
-    import Checkbox from '../checkbox/checkbox.vue';
-    import Cell from './cell.vue';
-    import Mixin from './mixin';
+    import tableHead from './table-head.vue';
+    import tableBody from './table-body.vue';
     import { oneOf, getStyle, deepCopy } from '../../utils/assist';
     const prefixCls = 'ivu-table';
 
     export default {
-        mixins: [ Mixin ],
-        components: { TableHead, Checkbox, Cell },
+        components: { tableHead, tableBody },
         props: {
             data: {
                 type: Array,
@@ -154,6 +135,16 @@
                 if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
                 return style;
             },
+            fixedTableStyle () {
+                let style = {};
+                if (this.leftFixedColumns.length) style.width = this.leftFixedColumns.reduce((a, b) => a + b);
+                return style;
+            },
+            fixedRightTableStyle () {
+                let style = {};
+                if (this.rightFixedColumns.length) style.width = this.rightFixedColumns.reduce((a, b) => a + b);
+                return style;
+            },
             bodyStyle () {
                 let style = {};
                 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
@@ -177,7 +168,7 @@
                         let autoWidthIndex = -1;
                         if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
 
-                        const $td = this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td');
+                        const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
                         for (let i = 0; i < $td.length; i++) {    // can not use forEach in Firefox
                             if (i === autoWidthIndex) {
                                 this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1);
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index ff102ed..f7baef6 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -189,4 +189,29 @@
             background-color: @table-td-highlight-bg;
         }
     }
+
+    &-fixed, &-fixed-right{
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-shadow: 1px 0 8px #d3d4d6;
+        overflow-x: hidden;
+
+        &::before {
+            content: '';
+            width: 100%;
+            height: 1px;
+            background-color: @border-color-base;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            z-index: 4;
+        }
+    }
+    &-fixed-right{
+        top: 0;
+        left: auto;
+        right: 0;
+        box-shadow: -1px 0 8px #d3d4d6;
+    }
 }
\ No newline at end of file
diff --git a/test/routers/table.vue b/test/routers/table.vue
index c27ad4c..2becea1 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -145,7 +145,7 @@
         },
         ready () {
             setTimeout(() => {
-                return;
+//                return;
 //                this.height = 150;
 //                return
 //                this.data.push({
--
libgit2 0.21.4