From 630141897540fe21230c0003a8b11573defd0b68 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Tue, 27 Mar 2018 00:07:27 +0800
Subject: [PATCH] fix table fixed-right header

---
 examples/routers/table.vue       |  9 ++++++++-
 src/components/table/mixin.js    | 13 +++++++++++--
 src/components/table/table.vue   | 16 +++++++++++++++-
 src/styles/components/table.less |  8 ++++++++
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 0558bf48..de4b8087 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -5,7 +5,7 @@
         <br><br><br><br><br>
         <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
         <!--<br><br><br><br><br>-->
-        <Table border :columns="columns5" :data="data5"></Table>
+        <Table border :columns="columns5" height="200" :data="data5"></Table>
         <br><br><br><br><br>
         <Table border :columns="columns6" :data="data5"></Table>
         <br><br><br><br><br>
@@ -103,6 +103,13 @@
                             }
                         ]
                     },
+                    {
+                        title: 'Gender',
+                        key: 'gender',
+                        align: 'center',
+                        width: 200,
+                        fixed: 'right'
+                    },
                     {
                         title: 'Gender',
                         key: 'gender',
diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 656a7c83..63566d6d 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -32,8 +32,17 @@ 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 (this.columns.length  === index + 1) {
+                //const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right');
+                let lastFixedIndex = -1;
+                for(let i=0;i<this.columns.length;i++){
+                    if(this.columns[i].fixed==='right'){
+                        lastFixedIndex = i;
+                    }
+                    else{
+                        break;
+                    }
+                }
+                if (lastFixedIndex === index) {
                     let scrollBarWidth = this.$parent.scrollBarWidth;
                     if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
                     width += scrollBarWidth;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index b149c2ff..217b8fff 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -85,6 +85,7 @@
                         :obj-data="objData"></table-body>
                 </div>
             </div>
+            <div :class="[prefixCls + '-fixed-right-header']" :style="fixedRightHeaderStyle" v-if="isRightFixed"></div>
             <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
         </div>
         <Spin fix size="large" v-if="loading">
@@ -199,7 +200,8 @@
                 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
+                headerWidth:0,
+                headerHeight:0,
             };
         },
         computed: {
@@ -293,6 +295,17 @@
                 style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
                 return style;
             },
+            fixedRightHeaderStyle () {
+                let style = {};
+                let width = 0;
+                let height = this.headerHeight+1;
+                if(this.showVerticalScrollBar){
+                    width = this.scrollBarWidth;
+                }
+                style.width = `${width}px`;
+                style.height = `${height}px`;
+                return style;
+            },
             bodyStyle () {
                 let style = {};
                 if (this.bodyHeight !== 0) {
@@ -345,6 +358,7 @@
                     this.columnsWidth = {};
                     this.$nextTick(()=>{
                         this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
+                        this.headerHeight = this.$refs.header.childNodes[0].offsetHeight;
                         if (!this.$refs.tbody) {
                             this.showVerticalScrollBar = false;
                             return;
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index e3376e54..15c3125a 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -288,6 +288,14 @@
         right: 0;
         box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
     }
+    &-fixed-right-header{
+        position: absolute;
+        top: -1px;
+        right: 0;
+        background-color: @table-thead-bg;
+        border-top: 1px solid @border-color-base;
+        border-bottom: 1px solid @border-color-split;
+    }
     &-fixed-header{
         overflow: hidden;
         &-with-empty{