fix table fixed-right header

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',

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');
+                //const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right');
-                if (this.columns.length  === index + 1) {
+                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;

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;

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{