Merge pull request #3245 from huanghong1125/2.0

fixed table scollbar

examples/routers/table.vue

@@ -5,10 +5,12 @@
         <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>
+        <Table border :columns="columns7"  height="240" :data="data7"></Table>
+        <br><br><br><br><br>
     </div>
 </template>
 <script>
@@ -103,19 +105,19 @@
                             }
                         ]
                     },
+                    // {
+                    //     title: 'Gender',
+                    //     key: 'gender',
+                    //     align: 'center',
+                    //     width: 200,
+                    //     fixed: 'right'
+                    // },
                     {
                         title: 'Gender',
                         key: 'gender',
                         align: 'center',
                         width: 200,
-                        fixed: 'right'
+                        //fixed: 'right'
-                    },
-                    {
-                        title: 'Gender',
-                        key: 'gender',
-                        align: 'center',
-                        width: 200,
-                        fixed: 'right'
                     }
                 ],
                 columns2: [
@@ -342,6 +344,55 @@
                         }
                     }
                 ],
+                
+                columns7: [
+                    {
+                        title: 'Date',
+                        key: 'date',
+                        sortable: true,
+                        width:200,
+                    },
+                    {
+                        title: 'Name',
+                        key: 'name',
+                        width:200,
+                    },
+                    {
+                        title: 'Age',
+                        key: 'age',
+                    },
+                    {
+                        title: 'Address',
+                        key: 'address',
+                        width:200,
+                    }
+                ],
+                data7: [
+                    {
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        date: '2016-10-03'
+                    },
+                    {
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'London No. 1 Lake Park',
+                        date: '2016-10-01'
+                    },
+                    {
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
+                        date: '2016-10-02'
+                    },
+                    {
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
+                        date: '2016-10-04'
+                    }
+                ],
             }
         },
         mounted () {

src/components/table/mixin.js

@@ -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;
         }

src/components/table/table-body.vue

@@ -1,7 +1,7 @@
 <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">

src/components/table/table-head.vue

@@ -1,7 +1,8 @@
 <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 && rowIndex===0" :class='scrollBarCellClass()' :rowspan="headRows.length"></th>
             </tr>
         </thead>
     </table>
@@ -93,12 +96,7 @@
         computed: {
             styles () {
                 const style = Object.assign({}, this.styleObject);
-                let scrollBarWidth = this.$parent.scrollBarWidth;
+                const width = parseInt(this.styleObject.width) ;
-                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;
                 style.width = `${width}px`;
                 return style;
             },
@@ -133,6 +131,23 @@
                     }
                 ];
             },
+            scrollBarCellClass(){
+                let hasRightFixed = false;
+                for(var i in this.headRows){
+                    for(var j in this.headRows[i]){
+                        if(this.headRows[i][j].fixed === 'right') {
+                            hasRightFixed=true;
+                            break;
+                        }
+                        if(hasRightFixed) break;
+                    }
+                }
+                return [
+                    {
+                        [`${this.prefixCls}-hidden`]: hasRightFixed
+                    }
+                ];
+            },
             itemClasses (column, item) {
                 return [
                     `${this.prefixCls}-filter-select-item`,

src/components/table/table.vue

@@ -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;
@@ -887,6 +896,10 @@
             height () {
                 this.handleResize();
                 this.fixedHeader();
+            },
+            showHorizontalScrollBar () {
+                this.handleResize();
+                this.fixedHeader();
             }
         }
     };

src/styles/components/table.less

@@ -71,7 +71,7 @@
         overflow: hidden;
     }
     &-body{
-        overflow: auto;
+        //overflow: auto;
         //position: relative;
 
     }