other / mew-iview

Commit 47638ad84a43781f680b4722f06a627128f168e6

Authored by huanghong
1 parent 6bc3b19f

fixed table scrollbar bug

Showing 4 changed files with 38 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @47638ad
  1 +<style>
  2 + .table{
  3 + margin:20px 0px;
  4 + }
  5 + .table .iview-table-cell{
  6 + padding-left: 2px !important;
  7 + padding-right: 2px !important;
  8 +
  9 + }
  10 + .table .iview-table-small td {
  11 + height: 30px !important;
  12 + }
  13 +</style>
  14 +
1 15 <template>
2 16 <div>
3 17 <Table border ref="selection" :columns="columns4" :data="data1"></Table>
... ... @@ -5,8 +19,9 @@
5 19 <Button @click="handleClearData">Clear Data</Button>
6 20 <Button @click="handleSelectAll(true)">Set all selected</Button>
7 21 <Button @click="handleSelectAll(false)">Cancel all selected</Button>
8   - <div style="margin:20px 0px;">
9   - <Table :data="tableData1" :columns="tableColumns1" style="width: 100%;" stripe></Table>
  22 +
  23 + <div class="table1">
  24 + <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
10 25 <div style="margin: 10px;overflow: hidden">
11 26 <div style="float: right;">
12 27 <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
... ... @@ -65,7 +80,7 @@
65 80 key: 'data5'
66 81 },
67 82 {
68   - title: 'Data6',
  83 + title: '一二三四一二三四一二三四一二三四',
69 84 key: 'data6'
70 85 },
71 86 ]
... ... @@ -118,7 +133,7 @@
118 133 data3: Math.floor(Math.random () * 100000000),
119 134 data4: Math.floor(Math.random () * Math.random () * 10000),
120 135 data5: Math.floor(Math.random () * Math.random () * 1000000),
121   - data6: Math.floor(Math.random () * Math.random () * 100000000),
  136 + data6: ''+Math.floor(Math.random () * Math.random () * 100000000)+Math.floor(Math.random () * 100000000)+Math.floor(Math.random () * 100000000),
122 137 });
123 138 }
124 139 this.tableData1 = data;
... ...
src/components/table/mixin.js
  Show/Hide comments   View file @47638ad
... ... @@ -26,12 +26,18 @@ export default {
26 26 }
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   - width += this.$parent.scrollBarWidth;
  29 + let scrollBarWidth = this.$parent.scrollBarWidth;
  30 + if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
  31 + width += scrollBarWidth;
30 32 }
31 33 // when fixed type,reset first right fixed column's width
32 34 if (this.fixed === 'right') {
33 35 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
34   - if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
  36 + if (firstFixedIndex === index) {
  37 + let scrollBarWidth = this.$parent.scrollBarWidth;
  38 + if (!this.$parent.showScrollBar()) scrollBarWidth = 0;
  39 + width += scrollBarWidth;
  40 + }
35 41 }
36 42 if (width === '0') width = '';
37 43 return width;
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @47638ad
... ... @@ -85,7 +85,9 @@
85 85 computed: {
86 86 styles () {
87 87 const style = Object.assign({}, this.styleObject);
88   - const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
  88 + let scrollBarWidth = this.$parent.scrollBarWidth;
  89 + if(!this.$parent.showScrollBar()) scrollBarWidth = 0;
  90 + const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
89 91 style.width = `${width}px`;
90 92 return style;
91 93 },
... ...
src/components/table/table.vue
  Show/Hide comments   View file @47638ad
... ... @@ -338,6 +338,12 @@
338 338 rowClsName (index) {
339 339 return this.rowClassName(this.data[index], index);
340 340 },
  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 + },
341 347 handleResize () {
342 348 this.$nextTick(() => {
343 349 const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
... ... @@ -374,6 +380,7 @@
374 380 };
375 381 }
376 382 this.columnsWidth = columnsWidth;
  383 + this.fixedHeader();
377 384 }
378 385 });
379 386 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
... ... @@ -478,6 +485,7 @@
478 485 }
479 486 this.$emit('on-selection-change', selection);
480 487 },
  488 +
481 489 fixedHeader () {
482 490 if (this.height) {
483 491 this.$nextTick(() => {
... ...