From 47638ad84a43781f680b4722f06a627128f168e6 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Fri, 16 Mar 2018 21:17:33 +0800
Subject: [PATCH 01/12] fixed table scrollbar bug

---
 examples/routers/table.vue          | 23 +++++++++++++++++++----
 src/components/table/mixin.js       | 10 ++++++++--
 src/components/table/table-head.vue |  4 +++-
 src/components/table/table.vue      |  8 ++++++++
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index ede1ff4c..a6fa6c52 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,3 +1,17 @@
+<style>
+    .table{
+        margin:20px 0px;
+    }
+    .table .iview-table-cell{
+        padding-left: 2px !important;
+        padding-right: 2px !important;
+
+    }
+    .table .iview-table-small td {
+        height: 30px !important;
+    }
+</style>
+
 <template>
     <div>
         <Table border ref="selection" :columns="columns4" :data="data1"></Table>
@@ -5,8 +19,9 @@
         <Button @click="handleClearData">Clear Data</Button>
         <Button @click="handleSelectAll(true)">Set all selected</Button>
         <Button @click="handleSelectAll(false)">Cancel all selected</Button>
-        <div style="margin:20px 0px;">
-            <Table :data="tableData1" :columns="tableColumns1"  style="width: 100%;" stripe></Table>
+        
+        <div class="table1">
+            <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
             <div style="margin: 10px;overflow: hidden">
                 <div style="float: right;">
                     <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
@@ -65,7 +80,7 @@
                         key: 'data5'
                     },
                     {
-                        title: 'Data6',
+                        title: '一二三四一二三四一二三四一二三四',
                         key: 'data6'
                     },
                 ]
@@ -118,7 +133,7 @@
                         data3: Math.floor(Math.random () * 100000000),
                         data4: Math.floor(Math.random () * Math.random () * 10000),
                         data5: Math.floor(Math.random () * Math.random () * 1000000),
-                        data6: Math.floor(Math.random () * Math.random () * 100000000),
+                        data6: ''+Math.floor(Math.random () * Math.random () * 100000000)+Math.floor(Math.random () * 100000000)+Math.floor(Math.random () * 100000000),
                     });
                 }
                 this.tableData1 = data;
diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 7a06e247..7fd69a56 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -26,12 +26,18 @@ export default {
             }
             // when browser has scrollBar,set a width to resolve scroll position bug
             if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
-                width += this.$parent.scrollBarWidth;
+                let scrollBarWidth = this.$parent.scrollBarWidth;
+                if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                width += scrollBarWidth;
             }
             // when fixed type,reset first right fixed column's width
             if (this.fixed === 'right') {
                 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
-                if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
+                if (firstFixedIndex === index) {
+                    let scrollBarWidth = this.$parent.scrollBarWidth;
+                    if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                    width += scrollBarWidth;
+                }
             }
             if (width === '0') width = '';
             return width;
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 5bca78ec..d2b4b7dd 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -85,7 +85,9 @@
         computed: {
             styles () {
                 const style = Object.assign({}, this.styleObject);
-                const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
+                let scrollBarWidth = this.$parent.scrollBarWidth;
+                if(!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
             },
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 4ee1f918..f5279ed9 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -338,6 +338,12 @@
             rowClsName (index) {
                 return this.rowClassName(this.data[index], index);
             },
+            showScrollBar () {
+                if (!this.$refs.tbody) return false;
+                let bodyContent = this.$refs.tbody.$el;
+                let bodyContentHeight = parseInt(getStyle(bodyContent, 'height'));
+                return this.bodyHeight? this.bodyHeight < bodyContentHeight : false;
+            },
             handleResize () {
                 this.$nextTick(() => {
                     const allWidth = !this.columns.some(cell => !cell.width);    // each column set a width
@@ -374,6 +380,7 @@
                                 };
                             }
                             this.columnsWidth = columnsWidth;
+                            this.fixedHeader();
                         }
                     });
                     // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
@@ -478,6 +485,7 @@
                 }
                 this.$emit('on-selection-change', selection);
             },
+            
             fixedHeader () {
                 if (this.height) {
                     this.$nextTick(() => {

From ebaf3c1d891a5b67e5c1cd8882b8c3dc2a5a89d1 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Fri, 16 Mar 2018 21:34:56 +0800
Subject: [PATCH 02/12] table test

---
 examples/routers/table.vue | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index a6fa6c52..a4a2a0d5 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,17 +1,3 @@
-<style>
-    .table{
-        margin:20px 0px;
-    }
-    .table .iview-table-cell{
-        padding-left: 2px !important;
-        padding-right: 2px !important;
-
-    }
-    .table .iview-table-small td {
-        height: 30px !important;
-    }
-</style>
-
 <template>
     <div>
         <Table border ref="selection" :columns="columns4" :data="data1"></Table>
@@ -20,7 +6,7 @@
         <Button @click="handleSelectAll(true)">Set all selected</Button>
         <Button @click="handleSelectAll(false)">Cancel all selected</Button>
         
-        <div class="table1">
+        <div style='margin:20px 0px;'>
             <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
             <div style="margin: 10px;overflow: hidden">
                 <div style="float: right;">
@@ -80,7 +66,7 @@
                         key: 'data5'
                     },
                     {
-                        title: '一二三四一二三四一二三四一二三四',
+                        title: 'Data6Data6Data6Data6Data6Data6Data6Data6Data6Data6Data6',
                         key: 'data6'
                     },
                 ]

From 14d1de0573b3307c438cb86ac5cbcee299102054 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Sat, 17 Mar 2018 02:16:19 +0800
Subject: [PATCH 03/12] fix table changing small scrollbar bug

---
 examples/routers/table.vue          | 13 ++++++++++---
 src/components/table/mixin.js       |  4 ++--
 src/components/table/table-head.vue |  2 +-
 src/components/table/table.vue      | 26 +++++++++++++++++++-------
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index a4a2a0d5..789815ef 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
+        <Table border ref="selection" :columns="columns4" :data="data1" :height='258'></Table>
         <Button @click="handleSetData">Set Data</Button>
         <Button @click="handleClearData">Clear Data</Button>
         <Button @click="handleSelectAll(true)">Set all selected</Button>
@@ -28,7 +28,8 @@
                     },
                     {
                         title: 'Name',
-                        key: 'name'
+                        key: 'name',
+                        width: 260
                     },
                     {
                         title: 'Age',
@@ -36,7 +37,13 @@
                     },
                     {
                         title: 'Address',
-                        key: 'address'
+                        key: 'address',
+                        width: 260
+                    },
+                    {
+                        title: 'Address',
+                        key: 'address',
+                        width: 260
                     }
                 ],
                 data1: [
diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 7fd69a56..13bbaf8e 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -27,7 +27,7 @@ export default {
             // when browser has scrollBar,set a width to resolve scroll position bug
             if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
                 let scrollBarWidth = this.$parent.scrollBarWidth;
-                if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                if (!this.$parent.showScrollBar) scrollBarWidth = 0;
                 width += scrollBarWidth;
             }
             // when fixed type,reset first right fixed column's width
@@ -35,7 +35,7 @@ export default {
                 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
                 if (firstFixedIndex === index) {
                     let scrollBarWidth = this.$parent.scrollBarWidth;
-                    if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                    if (!this.$parent.showScrollBar) scrollBarWidth = 0;
                     width += scrollBarWidth;
                 }
             }
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index d2b4b7dd..a2facca7 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -86,7 +86,7 @@
             styles () {
                 const style = Object.assign({}, this.styleObject);
                 let scrollBarWidth = this.$parent.scrollBarWidth;
-                if(!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                if(!this.$parent.showScrollBar) scrollBarWidth = 0;
                 const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index f5279ed9..7841f702 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -186,7 +186,8 @@
                 bodyRealHeight: 0,
                 scrollBarWidth: getScrollBarSize(),
                 currentContext: this.context,
-                cloneData: deepCopy(this.data)    // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
+                cloneData: deepCopy(this.data),    // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
+                showScrollBar:false,
             };
         },
         computed: {
@@ -338,12 +339,6 @@
             rowClsName (index) {
                 return this.rowClassName(this.data[index], index);
             },
-            showScrollBar () {
-                if (!this.$refs.tbody) return false;
-                let bodyContent = this.$refs.tbody.$el;
-                let bodyContentHeight = parseInt(getStyle(bodyContent, 'height'));
-                return this.bodyHeight? this.bodyHeight < bodyContentHeight : false;
-            },
             handleResize () {
                 this.$nextTick(() => {
                     const allWidth = !this.columns.some(cell => !cell.width);    // each column set a width
@@ -381,6 +376,23 @@
                             }
                             this.columnsWidth = columnsWidth;
                             this.fixedHeader();
+
+                            if (this.$refs.tbody) {
+                                let bodyContent = this.$refs.tbody.$el;
+                                let className = bodyContent.parentElement.className;
+                                bodyContent.parentElement.className = '';
+                                let bodyContentHeight = bodyContent.offsetHeight;
+                                let bodyContentWidth = bodyContent.offsetWidth;
+                                bodyContent.parentElement.className = className;
+                                let bodyWidth = this.$refs.tbody.$el.parentElement.offsetWidth;
+                                let bodyHeight = this.$refs.tbody.$el.parentElement.offsetHeight;
+                                let scrollBarWidth = 0;
+                                if (bodyWidth < bodyContentWidth) {
+                                    scrollBarWidth = this.scrollBarWidth;
+                                }
+                                let show = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
+                                this.showScrollBar = show;
+                            }
                         }
                     });
                     // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth

From f25f12527e6ae61bcca3a4b6d87ee869c7de84c4 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Sat, 17 Mar 2018 02:29:30 +0800
Subject: [PATCH 04/12] Refactor

---
 src/components/table/mixin.js       |  4 ++--
 src/components/table/table-head.vue |  2 +-
 src/components/table/table.vue      | 22 +++++++++++-----------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 13bbaf8e..64f8e9c6 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -27,7 +27,7 @@ export default {
             // when browser has scrollBar,set a width to resolve scroll position bug
             if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
                 let scrollBarWidth = this.$parent.scrollBarWidth;
-                if (!this.$parent.showScrollBar) scrollBarWidth = 0;
+                if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
                 width += scrollBarWidth;
             }
             // when fixed type,reset first right fixed column's width
@@ -35,7 +35,7 @@ export default {
                 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
                 if (firstFixedIndex === index) {
                     let scrollBarWidth = this.$parent.scrollBarWidth;
-                    if (!this.$parent.showScrollBar) scrollBarWidth = 0;
+                    if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
                     width += scrollBarWidth;
                 }
             }
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index a2facca7..7962462a 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -86,7 +86,7 @@
             styles () {
                 const style = Object.assign({}, this.styleObject);
                 let scrollBarWidth = this.$parent.scrollBarWidth;
-                if(!this.$parent.showScrollBar) scrollBarWidth = 0;
+                if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
                 const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 7841f702..5b13f018 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -187,7 +187,7 @@
                 scrollBarWidth: getScrollBarSize(),
                 currentContext: this.context,
                 cloneData: deepCopy(this.data),    // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
-                showScrollBar:false,
+                showVerticalScrollBar:false,
             };
         },
         computed: {
@@ -378,20 +378,20 @@
                             this.fixedHeader();
 
                             if (this.$refs.tbody) {
-                                let bodyContent = this.$refs.tbody.$el;
-                                let className = bodyContent.parentElement.className;
-                                bodyContent.parentElement.className = '';
-                                let bodyContentHeight = bodyContent.offsetHeight;
-                                let bodyContentWidth = bodyContent.offsetWidth;
-                                bodyContent.parentElement.className = className;
-                                let bodyWidth = this.$refs.tbody.$el.parentElement.offsetWidth;
-                                let bodyHeight = this.$refs.tbody.$el.parentElement.offsetHeight;
+                                let bodyContentEl = this.$refs.tbody.$el;
+                                let bodyEl = bodyContentEl.parentElement;
+                                let className = bodyEl.className;
+                                bodyEl.className = '';
+                                let bodyContentHeight = bodyContentEl.offsetHeight;
+                                let bodyContentWidth = bodyContentEl.offsetWidth;
+                                bodyEl.className = className;
+                                let bodyWidth = bodyEl.offsetWidth;
+                                let bodyHeight = bodyEl.offsetHeight;
                                 let scrollBarWidth = 0;
                                 if (bodyWidth < bodyContentWidth) {
                                     scrollBarWidth = this.scrollBarWidth;
                                 }
-                                let show = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
-                                this.showScrollBar = show;
+                                this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
                             }
                         }
                     });

From 224a79e7ca7d3472c11b6a05b659cc0438499f1c Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Sun, 18 Mar 2018 17:16:08 +0800
Subject: [PATCH 05/12] set back className in nextTick

---
 src/components/table/table.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 5b13f018..3957b68b 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -380,11 +380,10 @@
                             if (this.$refs.tbody) {
                                 let bodyContentEl = this.$refs.tbody.$el;
                                 let bodyEl = bodyContentEl.parentElement;
-                                let className = bodyEl.className;
                                 bodyEl.className = '';
+                                this.$nextTick(() => { bodyEl.className = this.prefixCls + '-body'; });
                                 let bodyContentHeight = bodyContentEl.offsetHeight;
                                 let bodyContentWidth = bodyContentEl.offsetWidth;
-                                bodyEl.className = className;
                                 let bodyWidth = bodyEl.offsetWidth;
                                 let bodyHeight = bodyEl.offsetHeight;
                                 let scrollBarWidth = 0;

From 8e171de8e02146eadee15de380922763a75d538d Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Tue, 20 Mar 2018 10:46:48 +0800
Subject: [PATCH 06/12] fixed #3124

---
 src/components/table/table.vue   | 16 ++++++++++------
 src/styles/components/table.less |  5 +++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 3957b68b..96ef55a8 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -23,12 +23,12 @@
                     :obj-data="objData"></table-body>
             </div>
             <div
-                :class="[prefixCls + '-tip']"
+                :class="[prefixCls + '-tip']" :style="bodyStyle" @scroll="handleBodyScroll"
                 v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table cellspacing="0" cellpadding="0" border="0">
                     <tbody>
                         <tr>
-                            <td :style="{ 'height': bodyStyle.height }">
+                            <td :style="{'height':bodyStyle.height,'width':`${this.headerWidth}px`}">
                                 <span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
                                 <span v-html="localeNoFilteredDataText" v-else></span>
                             </td>
@@ -188,6 +188,7 @@
                 currentContext: this.context,
                 cloneData: deepCopy(this.data),    // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
                 showVerticalScrollBar:false,
+                headerWidth:0
             };
         },
         computed: {
@@ -253,7 +254,7 @@
                         if (this.bodyHeight > this.bodyRealHeight) {
                             width = this.tableWidth;
                         } else {
-                            width = this.tableWidth - this.scrollBarWidth;
+                            width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
                         }
                     }
 //                    const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
@@ -348,7 +349,12 @@
                         this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
                     }
                     this.columnsWidth = {};
-                    if (!this.$refs.tbody) return;
+                    this.fixedHeader();
+                    this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
+                    if (!this.$refs.tbody) {
+                        this.showVerticalScrollBar = false;
+                        return;
+                    }
                     this.$nextTick(() => {
                         let columnsWidth = {};
                         let autoWidthIndex = -1;
@@ -358,7 +364,6 @@
                             const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr');
                             if ($tr.length === 0) return;
                             const $td = $tr[0].children;
-
                             for (let i = 0; i < $td.length; i++) {    // can not use forEach in Firefox
                                 const column = this.cloneColumns[i];
 
@@ -375,7 +380,6 @@
                                 };
                             }
                             this.columnsWidth = columnsWidth;
-                            this.fixedHeader();
 
                             if (this.$refs.tbody) {
                                 let bodyContentEl = this.$refs.tbody.$el;
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 725f0a74..5d49228a 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -74,6 +74,11 @@
         overflow: auto;
         //position: relative;
     }
+    &-tip{
+        overflow-x: auto;
+        overflow-y: hidden;
+        //position: relative;
+    }
 
     &-with-fixed-top&-with-footer{
         .@{table-prefix-cls}-footer{

From 9fea8e7de0d990528e339e6d8859c63b02e0e5b8 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Tue, 20 Mar 2018 19:28:39 +0800
Subject: [PATCH 07/12] fixed ivu-table-fixed-right scroll bar

---
 examples/routers/table.vue       | 97 +++++++++++++++++++++++++++++++-
 src/components/table/mixin.js    |  2 +-
 src/components/table/table.vue   | 63 +++++++++++++--------
 src/styles/components/table.less | 11 +++-
 4 files changed, 146 insertions(+), 27 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 789815ef..9c4e653b 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -5,7 +5,12 @@
         <Button @click="handleClearData">Clear Data</Button>
         <Button @click="handleSelectAll(true)">Set all selected</Button>
         <Button @click="handleSelectAll(false)">Cancel all selected</Button>
-        
+        <div style='margin:20px 0px'>
+            <Table border :columns="columns2" :data="data3"></Table>
+        </div>
+        <div style='margin:20px 0px'>
+            <Table :height='200' border :columns="columns2" :data="data3"></Table>
+        </div>
         <div style='margin:20px 0px;'>
             <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
             <div style="margin: 10px;overflow: hidden">
@@ -14,6 +19,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 </template>
 <script>
@@ -49,6 +55,95 @@
                 data1: [
 
                 ],
+                columns2: [
+                    {
+                        title: 'Name',
+                        key: 'name',
+                        width: 100,
+                        fixed: 'left'
+                    },
+                    {
+                        title: 'Age',
+                        key: 'age',
+                        width: 100
+                    },
+                    {
+                        title: 'Province',
+                        key: 'province',
+                        width: 100
+                    },
+                    {
+                        title: 'City',
+                        key: 'city',
+                        width: 100
+                    },
+                    {
+                        title: 'Address',
+                        key: 'address',
+                        width: 200
+                    },
+                    {
+                        title: 'Postcode',
+                        key: 'zip',
+                        width: 100
+                    },
+                    {
+                        title: 'Action',
+                        key: 'action',
+                        fixed: 'right',
+                        width: 120,
+                        render: (h, params) => {
+                            return h('div', [
+                                h('Button', {
+                                    props: {
+                                        type: 'text',
+                                        size: 'small'
+                                    }
+                                }, 'View'),
+                                h('Button', {
+                                    props: {
+                                        type: 'text',
+                                        size: 'small'
+                                    }
+                                }, 'Edit')
+                            ]);
+                        }
+                    }
+                ],
+                data3: [
+                    {
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        province: 'America',
+                        city: 'New York',
+                        zip: 100000
+                    },
+                    {
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'Washington, D.C. No. 1 Lake Park',
+                        province: 'America',
+                        city: 'Washington, D.C.',
+                        zip: 100000
+                    },
+                    {
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park',
+                        province: 'Australian',
+                        city: 'Sydney',
+                        zip: 100000
+                    },
+                    {
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park',
+                        province: 'Canada',
+                        city: 'Ottawa',
+                        zip: 100000
+                    }
+                ],
                 
                 tableData1: [],
                 tableColumns1: [
diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 64f8e9c6..5753e54b 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -31,7 +31,7 @@ export default {
                 width += scrollBarWidth;
             }
             // when fixed type,reset first right fixed column's width
-            if (this.fixed === 'right') {
+            if (this.fixed === 'right' && top ) {
                 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
                 if (firstFixedIndex === index) {
                     let scrollBarWidth = this.$parent.scrollBarWidth;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 96ef55a8..3023aab9 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -188,6 +188,7 @@
                 currentContext: this.context,
                 cloneData: deepCopy(this.data),    // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
                 showVerticalScrollBar:false,
+                showHorizontalScrollBar:false,
                 headerWidth:0
             };
         },
@@ -277,8 +278,9 @@
                 this.rightFixedColumns.forEach((col) => {
                     if (col.fixed && col.fixed === 'right') width += col._width;
                 });
-                width += this.scrollBarWidth;
+                //width += this.scrollBarWidth;
                 style.width = `${width}px`;
+                style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
                 return style;
             },
             bodyStyle () {
@@ -293,11 +295,11 @@
             fixedBodyStyle () {
                 let style = {};
                 if (this.bodyHeight !== 0) {
-                    let height = this.bodyHeight + this.scrollBarWidth - 1;
+                    let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;
 
                     // #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度
                     const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
-                    if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){
+                    if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){
                         height = this.bodyHeight;
                     }
 //                    style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
@@ -349,12 +351,13 @@
                         this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
                     }
                     this.columnsWidth = {};
-                    this.fixedHeader();
-                    this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
-                    if (!this.$refs.tbody) {
-                        this.showVerticalScrollBar = false;
-                        return;
-                    }
+                    this.$nextTick(()=>{
+                        this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
+                        if (!this.$refs.tbody) {
+                            this.showVerticalScrollBar = false;
+                            return;
+                        }
+                    });
                     this.$nextTick(() => {
                         let columnsWidth = {};
                         let autoWidthIndex = -1;
@@ -380,22 +383,36 @@
                                 };
                             }
                             this.columnsWidth = columnsWidth;
+                            this.$nextTick(()=>{
+                                this.fixedHeader();
+                                if (this.$refs.tbody) {
+                                    let bodyContentEl = this.$refs.tbody.$el;
+                                    let bodyEl = bodyContentEl.parentElement;
+                                    let bodyContentHeight = bodyContentEl.offsetHeight;
+                                    let bodyContentWidth = bodyContentEl.offsetWidth;
+                                    let bodyWidth = bodyEl.offsetWidth;
+                                    let bodyHeight = bodyEl.offsetHeight;
+                                    let scrollBarWidth = 0;
+                                    if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
+                                        scrollBarWidth = this.scrollBarWidth;
+                                    }
+                                    
+                                    this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
+                                    this.showHorizontalScrollBar = bodyWidth  < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
+                                    
+                                    if(this.showVerticalScrollBar){
+                                        bodyEl.classList.add(this.prefixCls +'-overflowY')
+                                    }else{
+                                        bodyEl.classList.remove(this.prefixCls +'-overflowY')
+                                    }
+                                    if(this.showHorizontalScrollBar){
+                                        bodyEl.classList.add(this.prefixCls +'-overflowX')
+                                    }else{
+                                        bodyEl.classList.remove(this.prefixCls +'-overflowX')
+                                    }
 
-                            if (this.$refs.tbody) {
-                                let bodyContentEl = this.$refs.tbody.$el;
-                                let bodyEl = bodyContentEl.parentElement;
-                                bodyEl.className = '';
-                                this.$nextTick(() => { bodyEl.className = this.prefixCls + '-body'; });
-                                let bodyContentHeight = bodyContentEl.offsetHeight;
-                                let bodyContentWidth = bodyContentEl.offsetWidth;
-                                let bodyWidth = bodyEl.offsetWidth;
-                                let bodyHeight = bodyEl.offsetHeight;
-                                let scrollBarWidth = 0;
-                                if (bodyWidth < bodyContentWidth) {
-                                    scrollBarWidth = this.scrollBarWidth;
                                 }
-                                this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
-                            }
+                            });
                         }
                     });
                     // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 5d49228a..7c43159a 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -71,8 +71,15 @@
         overflow: hidden;
     }
     &-body{
-        overflow: auto;
+        //overflow: auto;
         //position: relative;
+
+    }
+    &-overflowX{
+        overflow-x: scroll;
+    }
+    &-overflowY{
+        overflow-y: scroll;
     }
     &-tip{
         overflow-x: auto;
@@ -278,7 +285,7 @@
         box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
     }
     &-fixed-header{
-        overflow: hidden;
+        overflow: visible;
         &-with-empty{
             .@{table-prefix-cls}-hidden{
                 .@{table-prefix-cls}-sort{

From 42fa79572ae28c1456594135acbe4fc02205bfa6 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Tue, 20 Mar 2018 19:31:06 +0800
Subject: [PATCH 08/12] test

---
 src/components/table/table.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 3023aab9..9424ca94 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -401,14 +401,14 @@
                                     this.showHorizontalScrollBar = bodyWidth  < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
                                     
                                     if(this.showVerticalScrollBar){
-                                        bodyEl.classList.add(this.prefixCls +'-overflowY')
+                                        bodyEl.classList.add(this.prefixCls +'-overflowY');
                                     }else{
-                                        bodyEl.classList.remove(this.prefixCls +'-overflowY')
+                                        bodyEl.classList.remove(this.prefixCls +'-overflowY');
                                     }
                                     if(this.showHorizontalScrollBar){
-                                        bodyEl.classList.add(this.prefixCls +'-overflowX')
+                                        bodyEl.classList.add(this.prefixCls +'-overflowX');
                                     }else{
-                                        bodyEl.classList.remove(this.prefixCls +'-overflowX')
+                                        bodyEl.classList.remove(this.prefixCls +'-overflowX');
                                     }
 
                                 }

From 95e1720ce3c454be058304e1a797fa6f42a9bee7 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Wed, 21 Mar 2018 15:24:31 +0800
Subject: [PATCH 09/12] fix ivu-table-fixed bug

---
 examples/routers/table.vue          | 6 ++++++
 src/components/table/mixin.js       | 5 ++++-
 src/components/table/table-head.vue | 3 +++
 src/components/table/table.vue      | 4 ++--
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 9c4e653b..f1915c40 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -11,6 +11,12 @@
         <div style='margin:20px 0px'>
             <Table :height='200' border :columns="columns2" :data="data3"></Table>
         </div>
+        <div style='margin:20px 0px'>
+            <Table  :width='500' border :columns="columns2" :data="data3"></Table>
+        </div>
+        <div style='margin:20px 0px'>
+            <Table  :width='500' :height='200' border :columns="columns2" :data="data3"></Table>
+        </div>
         <div style='margin:20px 0px;'>
             <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
             <div style="margin: 10px;overflow: hidden">
diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 5753e54b..5bb2540c 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -25,7 +25,10 @@ export default {
                 width = this.columnsWidth[column._index].width;
             }
             // when browser has scrollBar,set a width to resolve scroll position bug
-            if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
+            if(this.columns.length==7 && column.fixed){
+                console.log(column);
+            }
+            if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && column.fixed!=='left' && !this.fixed) {
                 let scrollBarWidth = this.$parent.scrollBarWidth;
                 if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
                 width += scrollBarWidth;
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 7962462a..20f4be73 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -87,6 +87,9 @@
                 const style = Object.assign({}, this.styleObject);
                 let scrollBarWidth = this.$parent.scrollBarWidth;
                 if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
+               
+                let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0;
+                if(isLeftFixed) scrollBarWidth = 0;
                 const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 9424ca94..b2fbc636 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -314,7 +314,7 @@
                     if (col.fixed && col.fixed === 'left') {
                         left.push(col);
                     } else {
-                        other.push(col);
+                        //other.push(col);
                     }
                 });
                 return left.concat(other);
@@ -326,7 +326,7 @@
                     if (col.fixed && col.fixed === 'right') {
                         right.push(col);
                     } else {
-                        other.push(col);
+                        //other.push(col);
                     }
                 });
                 return right.concat(other);

From e399c5e9072ac1416ce83ce1b5cb49f285cdaaea Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Wed, 21 Mar 2018 15:27:14 +0800
Subject: [PATCH 10/12] remove console.log

---
 src/components/table/mixin.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 5bb2540c..ebbe2a87 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -25,9 +25,6 @@ export default {
                 width = this.columnsWidth[column._index].width;
             }
             // when browser has scrollBar,set a width to resolve scroll position bug
-            if(this.columns.length==7 && column.fixed){
-                console.log(column);
-            }
             if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && column.fixed!=='left' && !this.fixed) {
                 let scrollBarWidth = this.$parent.scrollBarWidth;
                 if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;

From b08bd8a8e2d62e942d347cd94717626e3413e179 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Wed, 21 Mar 2018 15:43:32 +0800
Subject: [PATCH 11/12] fixed height changed

---
 examples/routers/table.vue     | 4 +++-
 src/components/table/table.vue | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index f1915c40..f4eaadfe 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -18,7 +18,8 @@
             <Table  :width='500' :height='200' border :columns="columns2" :data="data3"></Table>
         </div>
         <div style='margin:20px 0px;'>
-            <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
+            Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
+            <Table :data="tableData1" :columns="tableColumns1" :height="fixedHeader ? 250 : ''" stripe size='small'></Table>
             <div style="margin: 10px;overflow: hidden">
                 <div style="float: right;">
                     <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
@@ -151,6 +152,7 @@
                     }
                 ],
                 
+                fixedHeader: false,
                 tableData1: [],
                 tableColumns1: [
                     {
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index b2fbc636..d8c62b9e 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -835,6 +835,7 @@
                 deep: true
             },
             height () {
+                this.handleResize();
                 this.fixedHeader();
             }
         }

From c1115edd1afe43f10fbf8fe08428f84485956f63 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Wed, 21 Mar 2018 16:23:17 +0800
Subject: [PATCH 12/12] fixed table

---
 examples/routers/table.vue    | 4 ++--
 src/components/table/mixin.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index dc831663..e4fba36d 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -12,10 +12,10 @@
             <Table :height='200' border :columns="columns2" :data="data3"></Table>
         </div>
         <div style='margin:20px 0px'>
-            <Table  :width='500' border :columns="columns2" :data="data3"></Table>
+            <Table  :width='600' border :columns="columns2" :data="data3"></Table>
         </div>
         <div style='margin:20px 0px'>
-            <Table  :width='500' :height='200' border :columns="columns2" :data="data3"></Table>
+            <Table  :width='600' :height='200' border :columns="columns2" :data="data3"></Table>
         </div>
         <div style='margin:20px 0px;'>
             Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index ebbe2a87..656a7c83 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -32,8 +32,8 @@ export default {
             }
             // when fixed type,reset first right fixed column's width
             if (this.fixed === 'right' && top ) {
-                const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
-                if (firstFixedIndex === index) {
+                //const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
+                if (this.columns.length  === index + 1) {
                     let scrollBarWidth = this.$parent.scrollBarWidth;
                     if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
                     width += scrollBarWidth;