chenhaodong / mew-iview

Commit b3ef1c6358515d40e17eb162afd30fc427f0c885

Authored by huanghong
1 parent 77201524

column add prop minValue and maxValue

Showing 2 changed files with 75 additions and 70 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @b3ef1c6
1 <template> 1 <template>
2 <div> 2 <div>
3 - <!-- <br><br><br><br><br> 3 + <br><br><br><br><br>
4 <Table border :columns="columns1" height="500" :data="data1"></Table> 4 <Table border :columns="columns1" height="500" :data="data1"></Table>
5 - <br><br><br><br><br> -->  
6 - <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>--> 5 + <Table border :columns="columns1" height='300'></Table>
  6 + <!-- <br><br><br><br><br> -->
  7 + <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
7 <!--<br><br><br><br><br>--> 8 <!--<br><br><br><br><br>-->
8 <!-- <Table border :columns="columns5" height="240" :data="data5"></Table> --> 9 <!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
9 - <br><br><br><br><br> 10 + <!-- <br><br><br><br><br> -->
10 <!-- <Table border :columns="columns6" :data="data5"></Table> --> 11 <!-- <Table border :columns="columns6" :data="data5"></Table> -->
11 - <br><br><br><br><br>  
12 - <!-- <Table border :columns="columns7" height="240" :data="data7"></Table>  
13 - <br><br><br><br><br> --> 12 + <!-- <br><br><br><br><br> -->
  13 + <Table border :columns="columns7" height="240" :data="data7"></Table>
  14 + <!-- <br><br><br><br><br> -->
14 <Table border :columns="columns8" :data="data7" height="200"></Table> 15 <Table border :columns="columns8" :data="data7" height="200"></Table>
  16 + <Table border :columns="columns8" height="200"></Table>
15 <br><br><br><br><br> 17 <br><br><br><br><br>
16 </div> 18 </div>
17 </template> 19 </template>
@@ -24,7 +26,8 @@ @@ -24,7 +26,8 @@
24 title: 'Name', 26 title: 'Name',
25 key: 'name', 27 key: 'name',
26 align: 'center', 28 align: 'center',
27 - width: 200, 29 + minWidth: 100,
  30 + maxWidth: 200,
28 fixed: 'left', 31 fixed: 'left',
29 filters: [ 32 filters: [
30 { 33 {
@@ -53,7 +56,8 @@ @@ -53,7 +56,8 @@
53 title: 'Age', 56 title: 'Age',
54 key: 'age', 57 key: 'age',
55 align: 'center', 58 align: 'center',
56 - width: 200, 59 + minWidth: 100,
  60 + maxWidth: 200,
57 sortable: true 61 sortable: true
58 }, 62 },
59 { 63 {
@@ -64,7 +68,8 @@ @@ -64,7 +68,8 @@
64 title: 'Street', 68 title: 'Street',
65 key: 'street', 69 key: 'street',
66 align: 'center', 70 align: 'center',
67 - width: 200 71 + minWidth: 100,
  72 + maxWidth: 200,
68 }, 73 },
69 { 74 {
70 title: 'Block', 75 title: 'Block',
@@ -74,14 +79,16 @@ @@ -74,14 +79,16 @@
74 title: 'Building', 79 title: 'Building',
75 key: 'building', 80 key: 'building',
76 align: 'center', 81 align: 'center',
77 - width: 200, 82 + minWidth: 100,
  83 + maxWidth: 200,
78 sortable: true 84 sortable: true
79 }, 85 },
80 { 86 {
81 title: 'Door No.', 87 title: 'Door No.',
82 key: 'door', 88 key: 'door',
83 align: 'center', 89 align: 'center',
84 - width: 200 90 + minWidth: 100,
  91 + maxWidth: 200,
85 } 92 }
86 ] 93 ]
87 } 94 }
@@ -97,13 +104,15 @@ @@ -97,13 +104,15 @@
97 title: 'Company Address', 104 title: 'Company Address',
98 key: 'caddress', 105 key: 'caddress',
99 align: 'center', 106 align: 'center',
100 - width: 200 107 + minWidth: 100,
  108 + maxWidth: 200,
101 }, 109 },
102 { 110 {
103 title: 'Company Name', 111 title: 'Company Name',
104 key: 'cname', 112 key: 'cname',
105 align: 'center', 113 align: 'center',
106 - width: 200 114 + minWidth: 100,
  115 + maxWidth: 200,
107 } 116 }
108 ] 117 ]
109 }, 118 },
@@ -118,7 +127,8 @@ @@ -118,7 +127,8 @@
118 title: 'Gender', 127 title: 'Gender',
119 key: 'gender', 128 key: 'gender',
120 align: 'center', 129 align: 'center',
121 - width: 200, 130 + minWidth: 100,
  131 + maxWidth: 200,
122 fixed: 'right' 132 fixed: 'right'
123 } 133 }
124 ], 134 ],
src/components/table/table.vue
  Show/Hide comments   View file @b3ef1c6
@@ -251,7 +251,7 @@ @@ -251,7 +251,7 @@
251 styles () { 251 styles () {
252 let style = {}; 252 let style = {};
253 if (this.height) { 253 if (this.height) {
254 - const height = (this.isLeftFixed || this.isRightFixed) ? parseInt(this.height) + this.scrollBarWidth : parseInt(this.height); 254 + const height = parseInt(this.height);
255 style.height = `${height}px`; 255 style.height = `${height}px`;
256 } 256 }
257 if (this.width) style.width = `${this.width}px`; 257 if (this.width) style.width = `${this.width}px`;
@@ -318,8 +318,7 @@ @@ -318,8 +318,7 @@
318 bodyStyle () { 318 bodyStyle () {
319 let style = {}; 319 let style = {};
320 if (this.bodyHeight !== 0) { 320 if (this.bodyHeight !== 0) {
321 - // add a height to resolve scroll bug when browser has a scrollBar in fixed type and height prop  
322 - const height = (this.isLeftFixed || this.isRightFixed) ? this.bodyHeight + this.scrollBarWidth : this.bodyHeight; 321 + const height = this.bodyHeight;
323 style.height = `${height}px`; 322 style.height = `${height}px`;
324 } 323 }
325 return style; 324 return style;
@@ -327,15 +326,8 @@ @@ -327,15 +326,8 @@
327 fixedBodyStyle () { 326 fixedBodyStyle () {
328 let style = {}; 327 let style = {};
329 if (this.bodyHeight !== 0) { 328 if (this.bodyHeight !== 0) {
330 - let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;  
331 -  
332 - // #2102 ้‡Œ๏ผŒๅฆ‚ๆžœ Table ๆฒกๆœ‰่ฎพ็ฝฎ width๏ผŒ่€Œๆ˜ฏ้›†ๆˆ็ˆถ็บง็š„ width๏ผŒๅ›บๅฎšๅˆ—ไนŸๅบ”่ฏฅไธๅŒ…ๅซๆปšๅŠจๆก้ซ˜ๅบฆ๏ผŒๆ‰€ไปฅ่ฟ™้‡Œ็›ดๆŽฅ่ฎก็ฎ—่กจๆ ผๅฎฝๅบฆ  
333 - const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;  
334 - if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){  
335 - height = this.bodyHeight;  
336 - }  
337 -// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;  
338 - style.height = this.scrollBarWidth > 0 ? `${height}px` : `${height - 1}px`; 329 + let height = this.bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0);
  330 + style.height = this.showHorizontalScrollBar ? `${height}px` : `${height - 1}px`;
339 } 331 }
340 return style; 332 return style;
341 }, 333 },
@@ -365,14 +357,6 @@ @@ -365,14 +357,6 @@
365 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; 357 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
366 } 358 }
367 this.columnsWidth = {}; 359 this.columnsWidth = {};
368 - this.$nextTick(()=>{  
369 - this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;  
370 - this.headerHeight = this.$refs.header.childNodes[0].offsetHeight;  
371 - if (!this.$refs.tbody) {  
372 - this.showVerticalScrollBar = false;  
373 - return;  
374 - }  
375 - });  
376 this.$nextTick(() => { 360 this.$nextTick(() => {
377 let columnsWidth = {}; 361 let columnsWidth = {};
378 362
@@ -393,6 +377,7 @@ @@ -393,6 +377,7 @@
393 maxWidthColumns.push(col); 377 maxWidthColumns.push(col);
394 } 378 }
395 } 379 }
  380 + col._width = null;
396 }); 381 });
397 382
398 minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth); 383 minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
@@ -405,6 +390,7 @@ @@ -405,6 +390,7 @@
405 390
406 for (let i = 0; i < maxWidthColumns.length; i++) { 391 for (let i = 0; i < maxWidthColumns.length; i++) {
407 if(columnWidth > maxWidthColumns[i].maxWidth){ 392 if(columnWidth > maxWidthColumns[i].maxWidth){
  393 + maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
408 usableWidth -= maxWidthColumns[i].maxWidth; 394 usableWidth -= maxWidthColumns[i].maxWidth;
409 usableLength--; 395 usableLength--;
410 columnWidth = parseInt(usableWidth / usableLength); 396 columnWidth = parseInt(usableWidth / usableLength);
@@ -412,7 +398,8 @@ @@ -412,7 +398,8 @@
412 } 398 }
413 399
414 for (let i = 0; i < minWidthColumns.length; i++) { 400 for (let i = 0; i < minWidthColumns.length; i++) {
415 - if(columnWidth < minWidthColumns[i].minWidth){ 401 + if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){
  402 + minWidthColumns[i]._width = minWidthColumns[i].minWidth;
416 usableWidth -= minWidthColumns[i].minWidth; 403 usableWidth -= minWidthColumns[i].minWidth;
417 usableLength--; 404 usableLength--;
418 columnWidth = parseInt(usableWidth / usableLength); 405 columnWidth = parseInt(usableWidth / usableLength);
@@ -430,7 +417,10 @@ @@ -430,7 +417,10 @@
430 width = column.width; 417 width = column.width;
431 } 418 }
432 else{ 419 else{
433 - if (column.minWidth > width){ 420 + if(column._width){
  421 + width = column._width;
  422 + }
  423 + else if (column.minWidth > width){
434 width = column.minWidth; 424 width = column.minWidth;
435 } 425 }
436 else if (column.maxWidth < width){ 426 else if (column.maxWidth < width){
@@ -445,7 +435,6 @@ @@ -445,7 +435,6 @@
445 } 435 }
446 } 436 }
447 437
448 -  
449 this.cloneColumns[i]._width = width; 438 this.cloneColumns[i]._width = width;
450 439
451 columnsWidth[column._index] = { 440 columnsWidth[column._index] = {
@@ -453,37 +442,11 @@ @@ -453,37 +442,11 @@
453 }; 442 };
454 443
455 } 444 }
456 - this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); 445 + //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
457 this.columnsWidth = columnsWidth; 446 this.columnsWidth = columnsWidth;
458 this.$nextTick(()=>{ 447 this.$nextTick(()=>{
459 this.fixedHeader(); 448 this.fixedHeader();
460 - if (this.$refs.tbody) {  
461 - let bodyContentEl = this.$refs.tbody.$el;  
462 - let bodyEl = bodyContentEl.parentElement;  
463 - let bodyContentHeight = bodyContentEl.offsetHeight;  
464 - let bodyContentWidth = bodyContentEl.offsetWidth;  
465 - let bodyWidth = bodyEl.offsetWidth;  
466 - let bodyHeight = bodyEl.offsetHeight;  
467 - let scrollBarWidth = 0;  
468 - if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {  
469 - scrollBarWidth = this.scrollBarWidth;  
470 - }  
471 -  
472 - this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;  
473 - this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);  
474 -  
475 - if(this.showVerticalScrollBar){  
476 - bodyEl.classList.add(this.prefixCls +'-overflowY');  
477 - }else{  
478 - bodyEl.classList.remove(this.prefixCls +'-overflowY');  
479 - }  
480 - if(this.showHorizontalScrollBar){  
481 - bodyEl.classList.add(this.prefixCls +'-overflowX');  
482 - }else{  
483 - bodyEl.classList.remove(this.prefixCls +'-overflowX');  
484 - }  
485 - this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);  
486 - } 449 +
487 }); 450 });
488 }); 451 });
489 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth 452 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
@@ -596,11 +559,44 @@ @@ -596,11 +559,44 @@
596 const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0; 559 const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
597 const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0; 560 const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
598 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight; 561 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
  562 + this.fixedBody();
599 }); 563 });
600 } else { 564 } else {
601 this.bodyHeight = 0; 565 this.bodyHeight = 0;
  566 + this.fixedBody();
602 } 567 }
603 }, 568 },
  569 + fixedBody (){
  570 + this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
  571 + this.headerHeight = this.$refs.header.childNodes[0].offsetHeight;
  572 + this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.parentElement.offsetWidth;
  573 + if (!this.$refs.tbody) {
  574 + this.showVerticalScrollBar = false;
  575 + return;
  576 + }
  577 + else{
  578 + let bodyContentEl = this.$refs.tbody.$el;
  579 + let bodyEl = bodyContentEl.parentElement;
  580 + let bodyContentHeight = bodyContentEl.offsetHeight;
  581 + let bodyHeight = bodyEl.offsetHeight;
  582 + let scrollBarWidth = 0;
  583 +
  584 + this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
  585 +
  586 + if(this.showVerticalScrollBar){
  587 + bodyEl.classList.add(this.prefixCls +'-overflowY');
  588 + }else{
  589 + bodyEl.classList.remove(this.prefixCls +'-overflowY');
  590 + }
  591 + if(this.showHorizontalScrollBar){
  592 + bodyEl.classList.add(this.prefixCls +'-overflowX');
  593 + }else{
  594 + bodyEl.classList.remove(this.prefixCls +'-overflowX');
  595 + }
  596 + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  597 + }
  598 + },
  599 +
604 hideColumnFilter () { 600 hideColumnFilter () {
605 this.cloneColumns.forEach((col) => col._filterVisible = false); 601 this.cloneColumns.forEach((col) => col._filterVisible = false);
606 }, 602 },
@@ -901,7 +897,6 @@ @@ -901,7 +897,6 @@
901 }, 897 },
902 mounted () { 898 mounted () {
903 this.handleResize(); 899 this.handleResize();
904 - this.fixedHeader();  
905 this.$nextTick(() => this.ready = true); 900 this.$nextTick(() => this.ready = true);
906 901
907 on(window, 'resize', this.handleResize); 902 on(window, 'resize', this.handleResize);
@@ -911,7 +906,6 @@ @@ -911,7 +906,6 @@
911 this.$on('on-visible-change', (val) => { 906 this.$on('on-visible-change', (val) => {
912 if (val) { 907 if (val) {
913 this.handleResize(); 908 this.handleResize();
914 - this.fixedHeader();  
915 } 909 }
916 }); 910 });
917 }, 911 },
@@ -951,11 +945,12 @@ @@ -951,11 +945,12 @@
951 }, 945 },
952 height () { 946 height () {
953 this.handleResize(); 947 this.handleResize();
954 - this.fixedHeader();  
955 }, 948 },
956 showHorizontalScrollBar () { 949 showHorizontalScrollBar () {
957 this.handleResize(); 950 this.handleResize();
958 - this.fixedHeader(); 951 + },
  952 + showVerticalScrollBar () {
  953 + this.handleResize();
959 } 954 }
960 } 955 }
961 }; 956 };