other / mew-iview

Commit 14d1de0573b3307c438cb86ac5cbcee299102054

Authored by huanghong
1 parent ebaf3c1d

fix table changing small scrollbar bug

Showing 4 changed files with 32 additions and 13 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @14d1de0
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Table border ref="selection" :columns="columns4" :data="data1"></Table> 3 + <Table border ref="selection" :columns="columns4" :data="data1" :height='258'></Table>
4 <Button @click="handleSetData">Set Data</Button> 4 <Button @click="handleSetData">Set Data</Button>
5 <Button @click="handleClearData">Clear Data</Button> 5 <Button @click="handleClearData">Clear Data</Button>
6 <Button @click="handleSelectAll(true)">Set all selected</Button> 6 <Button @click="handleSelectAll(true)">Set all selected</Button>
@@ -28,7 +28,8 @@ @@ -28,7 +28,8 @@
28 }, 28 },
29 { 29 {
30 title: 'Name', 30 title: 'Name',
31 - key: 'name' 31 + key: 'name',
  32 + width: 260
32 }, 33 },
33 { 34 {
34 title: 'Age', 35 title: 'Age',
@@ -36,7 +37,13 @@ @@ -36,7 +37,13 @@
36 }, 37 },
37 { 38 {
38 title: 'Address', 39 title: 'Address',
39 - key: 'address' 40 + key: 'address',
  41 + width: 260
  42 + },
  43 + {
  44 + title: 'Address',
  45 + key: 'address',
  46 + width: 260
40 } 47 }
41 ], 48 ],
42 data1: [ 49 data1: [
src/components/table/mixin.js
  Show/Hide comments   View file @14d1de0
@@ -27,7 +27,7 @@ export default { @@ -27,7 +27,7 @@ export default {
27 // when browser has scrollBar,set a width to resolve scroll position bug 27 // when browser has scrollBar,set a width to resolve scroll position bug
28 if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) { 28 if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
29 let scrollBarWidth = this.$parent.scrollBarWidth; 29 let scrollBarWidth = this.$parent.scrollBarWidth;
30 - if (!this.$parent.showScrollBar()) scrollBarWidth = 0; 30 + if (!this.$parent.showScrollBar) scrollBarWidth = 0;
31 width += scrollBarWidth; 31 width += scrollBarWidth;
32 } 32 }
33 // when fixed type,reset first right fixed column's width 33 // when fixed type,reset first right fixed column's width
@@ -35,7 +35,7 @@ export default { @@ -35,7 +35,7 @@ export default {
35 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); 35 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
36 if (firstFixedIndex === index) { 36 if (firstFixedIndex === index) {
37 let scrollBarWidth = this.$parent.scrollBarWidth; 37 let scrollBarWidth = this.$parent.scrollBarWidth;
38 - if (!this.$parent.showScrollBar()) scrollBarWidth = 0; 38 + if (!this.$parent.showScrollBar) scrollBarWidth = 0;
39 width += scrollBarWidth; 39 width += scrollBarWidth;
40 } 40 }
41 } 41 }
src/components/table/table-head.vue
  Show/Hide comments   View file @14d1de0
@@ -86,7 +86,7 @@ @@ -86,7 +86,7 @@
86 styles () { 86 styles () {
87 const style = Object.assign({}, this.styleObject); 87 const style = Object.assign({}, this.styleObject);
88 let scrollBarWidth = this.$parent.scrollBarWidth; 88 let scrollBarWidth = this.$parent.scrollBarWidth;
89 - if(!this.$parent.showScrollBar()) scrollBarWidth = 0; 89 + if(!this.$parent.showScrollBar) scrollBarWidth = 0;
90 const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth; 90 const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
91 style.width = `${width}px`; 91 style.width = `${width}px`;
92 return style; 92 return style;
src/components/table/table.vue
  Show/Hide comments   View file @14d1de0
@@ -186,7 +186,8 @@ @@ -186,7 +186,8 @@
186 bodyRealHeight: 0, 186 bodyRealHeight: 0,
187 scrollBarWidth: getScrollBarSize(), 187 scrollBarWidth: getScrollBarSize(),
188 currentContext: this.context, 188 currentContext: this.context,
189 - cloneData: deepCopy(this.data) // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data 189 + cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
  190 + showScrollBar:false,
190 }; 191 };
191 }, 192 },
192 computed: { 193 computed: {
@@ -338,12 +339,6 @@ @@ -338,12 +339,6 @@
338 rowClsName (index) { 339 rowClsName (index) {
339 return this.rowClassName(this.data[index], index); 340 return this.rowClassName(this.data[index], index);
340 }, 341 },
341 - showScrollBar () {  
342 - if (!this.$refs.tbody) return false;  
343 - let bodyContent = this.$refs.tbody.$el;  
344 - let bodyContentHeight = parseInt(getStyle(bodyContent, 'height'));  
345 - return this.bodyHeight? this.bodyHeight < bodyContentHeight : false;  
346 - },  
347 handleResize () { 342 handleResize () {
348 this.$nextTick(() => { 343 this.$nextTick(() => {
349 const allWidth = !this.columns.some(cell => !cell.width); // each column set a width 344 const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
@@ -381,6 +376,23 @@ @@ -381,6 +376,23 @@
381 } 376 }
382 this.columnsWidth = columnsWidth; 377 this.columnsWidth = columnsWidth;
383 this.fixedHeader(); 378 this.fixedHeader();
  379 +
  380 + if (this.$refs.tbody) {
  381 + let bodyContent = this.$refs.tbody.$el;
  382 + let className = bodyContent.parentElement.className;
  383 + bodyContent.parentElement.className = '';
  384 + let bodyContentHeight = bodyContent.offsetHeight;
  385 + let bodyContentWidth = bodyContent.offsetWidth;
  386 + bodyContent.parentElement.className = className;
  387 + let bodyWidth = this.$refs.tbody.$el.parentElement.offsetWidth;
  388 + let bodyHeight = this.$refs.tbody.$el.parentElement.offsetHeight;
  389 + let scrollBarWidth = 0;
  390 + if (bodyWidth < bodyContentWidth) {
  391 + scrollBarWidth = this.scrollBarWidth;
  392 + }
  393 + let show = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
  394 + this.showScrollBar = show;
  395 + }
384 } 396 }
385 }); 397 });
386 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth 398 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth