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 1 <template>
2 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 4 <Button @click="handleSetData">Set Data</Button>
5 5 <Button @click="handleClearData">Clear Data</Button>
6 6 <Button @click="handleSelectAll(true)">Set all selected</Button>
... ... @@ -28,7 +28,8 @@
28 28 },
29 29 {
30 30 title: 'Name',
31   - key: 'name'
  31 + key: 'name',
  32 + width: 260
32 33 },
33 34 {
34 35 title: 'Age',
... ... @@ -36,7 +37,13 @@
36 37 },
37 38 {
38 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 49 data1: [
... ...
src/components/table/mixin.js
  Show/Hide comments   View file @14d1de0
... ... @@ -27,7 +27,7 @@ export default {
27 27 // when browser has scrollBar,set a width to resolve scroll position bug
28 28 if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
29 29 let scrollBarWidth = this.$parent.scrollBarWidth;
30   - if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
  30 + if (!this.$parent.showScrollBar) scrollBarWidth = 0;
31 31 width += scrollBarWidth;
32 32 }
33 33 // when fixed type,reset first right fixed column's width
... ... @@ -35,7 +35,7 @@ export default {
35 35 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
36 36 if (firstFixedIndex === index) {
37 37 let scrollBarWidth = this.$parent.scrollBarWidth;
38   - if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
  38 + if (!this.$parent.showScrollBar) scrollBarWidth = 0;
39 39 width += scrollBarWidth;
40 40 }
41 41 }
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @14d1de0
... ... @@ -86,7 +86,7 @@
86 86 styles () {
87 87 const style = Object.assign({}, this.styleObject);
88 88 let scrollBarWidth = this.$parent.scrollBarWidth;
89   - if(!this.$parent.showScrollBar()) scrollBarWidth = 0;
  89 + if(!this.$parent.showScrollBar) scrollBarWidth = 0;
90 90 const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
91 91 style.width = `${width}px`;
92 92 return style;
... ...
src/components/table/table.vue
  Show/Hide comments   View file @14d1de0
... ... @@ -186,7 +186,8 @@
186 186 bodyRealHeight: 0,
187 187 scrollBarWidth: getScrollBarSize(),
188 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 193 computed: {
... ... @@ -338,12 +339,6 @@
338 339 rowClsName (index) {
339 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 342 handleResize () {
348 343 this.$nextTick(() => {
349 344 const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
... ... @@ -381,6 +376,23 @@
381 376 }
382 377 this.columnsWidth = columnsWidth;
383 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 398 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
... ...