chenhaodong / mew-iview

Commit 46c73823e095fbea2aa58e21ae4f3448467d2fa0

Authored by Aresn
Committed by GitHub
2 parents 8087ae45 75803add

Merge pull request #3245 from huanghong1125/2.0 

fixed table scollbar
Showing 6 changed files with 99 additions and 44 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @46c7382
@@ -5,10 +5,12 @@ @@ -5,10 +5,12 @@
5 <br><br><br><br><br> 5 <br><br><br><br><br>
6 <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>--> 6 <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
7 <!--<br><br><br><br><br>--> 7 <!--<br><br><br><br><br>-->
8 - <Table border :columns="columns5" height="200" :data="data5"></Table> 8 + <Table border :columns="columns5" height="240" :data="data5"></Table>
9 <br><br><br><br><br> 9 <br><br><br><br><br>
10 <Table border :columns="columns6" :data="data5"></Table> 10 <Table border :columns="columns6" :data="data5"></Table>
11 <br><br><br><br><br> 11 <br><br><br><br><br>
  12 + <Table border :columns="columns7" height="240" :data="data7"></Table>
  13 + <br><br><br><br><br>
12 </div> 14 </div>
13 </template> 15 </template>
14 <script> 16 <script>
@@ -103,19 +105,19 @@ @@ -103,19 +105,19 @@
103 } 105 }
104 ] 106 ]
105 }, 107 },
  108 + // {
  109 + // title: 'Gender',
  110 + // key: 'gender',
  111 + // align: 'center',
  112 + // width: 200,
  113 + // fixed: 'right'
  114 + // },
106 { 115 {
107 title: 'Gender', 116 title: 'Gender',
108 key: 'gender', 117 key: 'gender',
109 align: 'center', 118 align: 'center',
110 width: 200, 119 width: 200,
111 - fixed: 'right'  
112 - },  
113 - {  
114 - title: 'Gender',  
115 - key: 'gender',  
116 - align: 'center',  
117 - width: 200,  
118 - fixed: 'right' 120 + //fixed: 'right'
119 } 121 }
120 ], 122 ],
121 columns2: [ 123 columns2: [
@@ -342,6 +344,55 @@ @@ -342,6 +344,55 @@
342 } 344 }
343 } 345 }
344 ], 346 ],
  347 +
  348 + columns7: [
  349 + {
  350 + title: 'Date',
  351 + key: 'date',
  352 + sortable: true,
  353 + width:200,
  354 + },
  355 + {
  356 + title: 'Name',
  357 + key: 'name',
  358 + width:200,
  359 + },
  360 + {
  361 + title: 'Age',
  362 + key: 'age',
  363 + },
  364 + {
  365 + title: 'Address',
  366 + key: 'address',
  367 + width:200,
  368 + }
  369 + ],
  370 + data7: [
  371 + {
  372 + name: 'John Brown',
  373 + age: 18,
  374 + address: 'New York No. 1 Lake Park',
  375 + date: '2016-10-03'
  376 + },
  377 + {
  378 + name: 'Jim Green',
  379 + age: 24,
  380 + address: 'London No. 1 Lake Park',
  381 + date: '2016-10-01'
  382 + },
  383 + {
  384 + name: 'Joe Black',
  385 + age: 30,
  386 + address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
  387 + date: '2016-10-02'
  388 + },
  389 + {
  390 + name: 'Jon Snow',
  391 + age: 26,
  392 + address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
  393 + date: '2016-10-04'
  394 + }
  395 + ],
345 } 396 }
346 }, 397 },
347 mounted () { 398 mounted () {
src/components/table/mixin.js
  Show/Hide comments   View file @46c7382
@@ -17,37 +17,13 @@ export default { @@ -17,37 +17,13 @@ export default {
17 isPopperShow (column) { 17 isPopperShow (column) {
18 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); 18 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
19 }, 19 },
20 - setCellWidth (column, index, top) { 20 + setCellWidth (column) {
21 let width = ''; 21 let width = '';
22 if (column.width) { 22 if (column.width) {
23 width = column.width; 23 width = column.width;
24 } else if (this.columnsWidth[column._index]) { 24 } else if (this.columnsWidth[column._index]) {
25 width = this.columnsWidth[column._index].width; 25 width = this.columnsWidth[column._index].width;
26 } 26 }
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 && column.fixed!=='left' && !this.fixed) {  
29 - let scrollBarWidth = this.$parent.scrollBarWidth;  
30 - if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;  
31 - width += scrollBarWidth;  
32 - }  
33 - // when fixed type,reset first right fixed column's width  
34 - if (this.fixed === 'right' && top ) {  
35 - //const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right');  
36 - let lastFixedIndex = -1;  
37 - for(let i=0;i<this.columns.length;i++){  
38 - if(this.columns[i].fixed==='right'){  
39 - lastFixedIndex = i;  
40 - }  
41 - else{  
42 - break;  
43 - }  
44 - }  
45 - if (lastFixedIndex === index) {  
46 - let scrollBarWidth = this.$parent.scrollBarWidth;  
47 - if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;  
48 - width += scrollBarWidth;  
49 - }  
50 - }  
51 if (width === '0') width = ''; 27 if (width === '0') width = '';
52 return width; 28 return width;
53 } 29 }
src/components/table/table-body.vue
  Show/Hide comments   View file @46c7382
1 <template> 1 <template>
2 <table cellspacing="0" cellpadding="0" border="0" :style="styleObject"> 2 <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
3 <colgroup> 3 <colgroup>
4 - <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)"> 4 + <col v-for="(column, index) in columns" :width="setCellWidth(column)">
5 </colgroup> 5 </colgroup>
6 <tbody :class="[prefixCls + '-tbody']"> 6 <tbody :class="[prefixCls + '-tbody']">
7 <template v-for="(row, index) in data"> 7 <template v-for="(row, index) in data">
src/components/table/table-head.vue
  Show/Hide comments   View file @46c7382
1 <template> 1 <template>
2 <table cellspacing="0" cellpadding="0" border="0" :style="styles"> 2 <table cellspacing="0" cellpadding="0" border="0" :style="styles">
3 <colgroup> 3 <colgroup>
4 - <col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)"> 4 + <col v-for="(column, index) in columns" :width="setCellWidth(column)">
  5 + <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/>
5 </colgroup> 6 </colgroup>
6 <thead> 7 <thead>
7 <tr v-for="(cols, rowIndex) in headRows"> 8 <tr v-for="(cols, rowIndex) in headRows">
@@ -59,6 +60,8 @@ @@ -59,6 +60,8 @@
59 </template> 60 </template>
60 </div> 61 </div>
61 </th> 62 </th>
  63 +
  64 + <th v-if="$parent.showVerticalScrollBar && rowIndex===0" :class='scrollBarCellClass()' :rowspan="headRows.length"></th>
62 </tr> 65 </tr>
63 </thead> 66 </thead>
64 </table> 67 </table>
@@ -93,12 +96,7 @@ @@ -93,12 +96,7 @@
93 computed: { 96 computed: {
94 styles () { 97 styles () {
95 const style = Object.assign({}, this.styleObject); 98 const style = Object.assign({}, this.styleObject);
96 - let scrollBarWidth = this.$parent.scrollBarWidth;  
97 - if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;  
98 -  
99 - let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0;  
100 - if(isLeftFixed) scrollBarWidth = 0;  
101 - const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth; 99 + const width = parseInt(this.styleObject.width) ;
102 style.width = `${width}px`; 100 style.width = `${width}px`;
103 return style; 101 return style;
104 }, 102 },
@@ -133,6 +131,23 @@ @@ -133,6 +131,23 @@
133 } 131 }
134 ]; 132 ];
135 }, 133 },
  134 + scrollBarCellClass(){
  135 + let hasRightFixed = false;
  136 + for(var i in this.headRows){
  137 + for(var j in this.headRows[i]){
  138 + if(this.headRows[i][j].fixed === 'right') {
  139 + hasRightFixed=true;
  140 + break;
  141 + }
  142 + if(hasRightFixed) break;
  143 + }
  144 + }
  145 + return [
  146 + {
  147 + [`${this.prefixCls}-hidden`]: hasRightFixed
  148 + }
  149 + ];
  150 + },
136 itemClasses (column, item) { 151 itemClasses (column, item) {
137 return [ 152 return [
138 `${this.prefixCls}-filter-select-item`, 153 `${this.prefixCls}-filter-select-item`,
src/components/table/table.vue
  Show/Hide comments   View file @46c7382
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel"> 5 <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel">
6 <table-head 6 <table-head
7 :prefix-cls="prefixCls" 7 :prefix-cls="prefixCls"
8 - :styleObject="tableStyle" 8 + :styleObject="tableHeaderStyle"
9 :columns="cloneColumns" 9 :columns="cloneColumns"
10 :column-rows="columnRows" 10 :column-rows="columnRows"
11 :obj-data="objData" 11 :obj-data="objData"
@@ -275,6 +275,15 @@ @@ -275,6 +275,15 @@
275 } 275 }
276 return style; 276 return style;
277 }, 277 },
  278 + tableHeaderStyle () {
  279 + let style = {};
  280 + if (this.tableWidth !== 0) {
  281 + let width = '';
  282 + width = this.tableWidth;
  283 + style.width = `${width}px`;
  284 + }
  285 + return style;
  286 + },
278 fixedTableStyle () { 287 fixedTableStyle () {
279 let style = {}; 288 let style = {};
280 let width = 0; 289 let width = 0;
@@ -887,6 +896,10 @@ @@ -887,6 +896,10 @@
887 height () { 896 height () {
888 this.handleResize(); 897 this.handleResize();
889 this.fixedHeader(); 898 this.fixedHeader();
  899 + },
  900 + showHorizontalScrollBar () {
  901 + this.handleResize();
  902 + this.fixedHeader();
890 } 903 }
891 } 904 }
892 }; 905 };
src/styles/components/table.less
  Show/Hide comments   View file @46c7382
@@ -71,7 +71,7 @@ @@ -71,7 +71,7 @@
71 overflow: hidden; 71 overflow: hidden;
72 } 72 }
73 &-body{ 73 &-body{
74 - overflow: auto; 74 + //overflow: auto;
75 //position: relative; 75 //position: relative;
76 76
77 } 77 }