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