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] 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