fixed table scrollbar bug

huanghong
1 parent 6bc3b19f
Showing 4 changed files with 38 additions and 7 deletions Show diff stats
examples/routers/table.vue
src/components/table/mixin.js
src/components/table/table-head.vue
src/components/table/table.vue
+<style>
+    .table{
+        margin:20px 0px;
+    }
+    .table .iview-table-cell{
+        padding-left: 2px !important;
+        padding-right: 2px !important;
+
+    }
+    .table .iview-table-small td {
+        height: 30px !important;
+    }
+</style>
+
 <template>
     <div>
         <Table border ref="selection" :columns="columns4" :data="data1"></Table>
@@ -5,8 +19,9 @@
         <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 :data="tableData1" :columns="tableColumns1"  style="width: 100%;" stripe></Table>
+        
+        <div class="table1">
+            <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
             <div style="margin: 10px;overflow: hidden">
                 <div style="float: right;">
                     <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
@@ -65,7 +80,7 @@
                         key: 'data5'
                     },
                     {
-                        title: 'Data6',
+                        title: '一二三四一二三四一二三四一二三四',
                         key: 'data6'
                     },
                 ]
@@ -118,7 +133,7 @@
                         data3: Math.floor(Math.random () * 100000000),
                         data4: Math.floor(Math.random () * Math.random () * 10000),
                         data5: Math.floor(Math.random () * Math.random () * 1000000),
-                        data6: Math.floor(Math.random () * Math.random () * 100000000),
+                        data6: ''+Math.floor(Math.random () * Math.random () * 100000000)+Math.floor(Math.random () * 100000000)+Math.floor(Math.random () * 100000000),
                     });
                 }
                 this.tableData1 = data;
@@ -26,12 +26,18 @@ export default {
             }
             // when browser has scrollBar,set a width to resolve scroll position bug
             if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
-                width += this.$parent.scrollBarWidth;
+                let scrollBarWidth = this.$parent.scrollBarWidth;
+                if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                width += scrollBarWidth;
             }
             // when fixed type,reset first right fixed column's width
             if (this.fixed === 'right') {
                 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
-                if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
+                if (firstFixedIndex === index) {
+                    let scrollBarWidth = this.$parent.scrollBarWidth;
+                    if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                    width += scrollBarWidth;
+                }
             }
             if (width === '0') width = '';
             return width;
@@ -85,7 +85,9 @@
         computed: {
             styles () {
                 const style = Object.assign({}, this.styleObject);
-                const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
+                let scrollBarWidth = this.$parent.scrollBarWidth;
+                if(!this.$parent.showScrollBar()) scrollBarWidth = 0;
+                const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
             },
@@ -338,6 +338,12 @@
             rowClsName (index) {
                 return this.rowClassName(this.data[index], index);
             },
+            showScrollBar () {
+                if (!this.$refs.tbody) return false;
+                let bodyContent = this.$refs.tbody.$el;
+                let bodyContentHeight = parseInt(getStyle(bodyContent, 'height'));
+                return this.bodyHeight? this.bodyHeight < bodyContentHeight : false;
+            },
             handleResize () {
                 this.$nextTick(() => {
                     const allWidth = !this.columns.some(cell => !cell.width);    // each column set a width
@@ -374,6 +380,7 @@
                                 };
                             }
                             this.columnsWidth = columnsWidth;
+                            this.fixedHeader();
                         }
                     });
                     // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
@@ -478,6 +485,7 @@
                 }
                 this.$emit('on-selection-change', selection);
             },
+            
             fixedHeader () {
                 if (this.height) {
                     this.$nextTick(() => {