fixed table scollbar

huanghong
1 parent 6b90a39c
Showing 6 changed files with 19 additions and 36 deletions Show diff stats
examples/routers/table.vue
src/components/table/mixin.js
src/components/table/table-body.vue
src/components/table/table-head.vue
src/components/table/table.vue
src/styles/components/table.less
@@ -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" height="200" :data="data5"></Table>
+        <Table border :columns="columns5" height="240" :data="data5"></Table>
         <br><br><br><br><br>
         <Table border :columns="columns6" :data="data5"></Table>
         <br><br><br><br><br>
@@ -17,37 +17,13 @@ export default {
         isPopperShow (column) {
             return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
         },
-        setCellWidth (column, index, top) {
+        setCellWidth (column) {
             let width = '';
             if (column.width) {
                 width = column.width;
             } else if (this.columnsWidth[column._index]) {
                 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 && column.fixed!=='left' && !this.fixed) {
-                let scrollBarWidth = this.$parent.scrollBarWidth;
-                if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
-                width += scrollBarWidth;
-            }
-            // when fixed type,reset first right fixed column's width
-            if (this.fixed === 'right' && top ) {
-                //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;
-                }
-            }
             if (width === '0') width = '';
             return width;
         }
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
         <colgroup>
-            <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
+            <col v-for="(column, index) in columns" :width="setCellWidth(column)">
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <template v-for="(row, index) in data">
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="styles">
         <colgroup>
-            <col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)">
+            <col v-for="(column, index) in columns" :width="setCellWidth(column)">
+            <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/>
         </colgroup>
         <thead>
             <tr v-for="(cols, rowIndex) in headRows">
@@ -59,6 +60,8 @@
                         </template>
                     </div>
                 </th>
+                
+                <th v-if="$parent.showVerticalScrollBar" :rowspan="headRows.length"></th>
             </tr>
         </thead>
     </table>
@@ -93,12 +96,7 @@
         computed: {
             styles () {
                 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;
+                const width = parseInt(this.styleObject.width) ;
                 style.width = `${width}px`;
                 return style;
             },
@@ -5,7 +5,7 @@
             <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel">
                 <table-head
                     :prefix-cls="prefixCls"
-                    :styleObject="tableStyle"
+                    :styleObject="tableHeaderStyle"
                     :columns="cloneColumns"
                     :column-rows="columnRows"
                     :obj-data="objData"
@@ -275,6 +275,15 @@
                 }
                 return style;
             },
+            tableHeaderStyle () {
+                let style = {};
+                if (this.tableWidth !== 0) {
+                    let width = '';
+                    width = this.tableWidth;
+                    style.width = `${width}px`;
+                }
+                return style;
+            },
             fixedTableStyle () {
                 let style = {};
                 let width = 0;
@@ -71,7 +71,7 @@
         overflow: hidden;
     }
     &-body{
-        overflow: auto;
+        //overflow: auto;
         //position: relative;
  
     }