other / mew-iview

Commit fda6dfa2c527444846fb35adc6af18e0a169598f

Authored by huanghong
1 parent 77201524

column add prop minWidth and maxWidth

Showing 2 changed files with 74 additions and 70 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @fda6dfa
1 1 <template>
2 2 <div>
3   - <!-- <br><br><br><br><br>
  3 + <br><br><br><br><br>
4 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 8 <!--<br><br><br><br><br>-->
8 9 <!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
9   - <br><br><br><br><br>
  10 + <!-- <br><br><br><br><br> -->
10 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 15 <Table border :columns="columns8" :data="data7" height="200"></Table>
  16 + <Table border :columns="columns8" height="200"></Table>
15 17 <br><br><br><br><br>
16 18 </div>
17 19 </template>
... ... @@ -24,7 +26,8 @@
24 26 title: 'Name',
25 27 key: 'name',
26 28 align: 'center',
27   - width: 200,
  29 + minWidth: 100,
  30 + maxWidth: 200,
28 31 fixed: 'left',
29 32 filters: [
30 33 {
... ... @@ -53,7 +56,8 @@
53 56 title: 'Age',
54 57 key: 'age',
55 58 align: 'center',
56   - width: 200,
  59 + minWidth: 100,
  60 + maxWidth: 200,
57 61 sortable: true
58 62 },
59 63 {
... ... @@ -64,7 +68,8 @@
64 68 title: 'Street',
65 69 key: 'street',
66 70 align: 'center',
67   - width: 200
  71 + minWidth: 100,
  72 + maxWidth: 200,
68 73 },
69 74 {
70 75 title: 'Block',
... ... @@ -74,14 +79,16 @@
74 79 title: 'Building',
75 80 key: 'building',
76 81 align: 'center',
77   - width: 200,
  82 + minWidth: 100,
  83 + maxWidth: 200,
78 84 sortable: true
79 85 },
80 86 {
81 87 title: 'Door No.',
82 88 key: 'door',
83 89 align: 'center',
84   - width: 200
  90 + minWidth: 100,
  91 + maxWidth: 200,
85 92 }
86 93 ]
87 94 }
... ... @@ -97,13 +104,15 @@
97 104 title: 'Company Address',
98 105 key: 'caddress',
99 106 align: 'center',
100   - width: 200
  107 + minWidth: 100,
  108 + maxWidth: 200,
101 109 },
102 110 {
103 111 title: 'Company Name',
104 112 key: 'cname',
105 113 align: 'center',
106   - width: 200
  114 + minWidth: 100,
  115 + maxWidth: 200,
107 116 }
108 117 ]
109 118 },
... ... @@ -118,7 +127,8 @@
118 127 title: 'Gender',
119 128 key: 'gender',
120 129 align: 'center',
121   - width: 200,
  130 + minWidth: 100,
  131 + maxWidth: 200,
122 132 fixed: 'right'
123 133 }
124 134 ],
... ...
src/components/table/table.vue
  Show/Hide comments   View file @fda6dfa
... ... @@ -251,7 +251,7 @@
251 251 styles () {
252 252 let style = {};
253 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 255 style.height = `${height}px`;
256 256 }
257 257 if (this.width) style.width = `${this.width}px`;
... ... @@ -318,8 +318,7 @@
318 318 bodyStyle () {
319 319 let style = {};
320 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 322 style.height = `${height}px`;
324 323 }
325 324 return style;
... ... @@ -327,15 +326,8 @@
327 326 fixedBodyStyle () {
328 327 let style = {};
329 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 332 return style;
341 333 },
... ... @@ -365,14 +357,6 @@
365 357 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
366 358 }
367 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 360 this.$nextTick(() => {
377 361 let columnsWidth = {};
378 362  
... ... @@ -393,6 +377,7 @@
393 377 maxWidthColumns.push(col);
394 378 }
395 379 }
  380 + col._width = null;
396 381 });
397 382  
398 383 minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
... ... @@ -405,6 +390,7 @@
405 390  
406 391 for (let i = 0; i < maxWidthColumns.length; i++) {
407 392 if(columnWidth > maxWidthColumns[i].maxWidth){
  393 + maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
408 394 usableWidth -= maxWidthColumns[i].maxWidth;
409 395 usableLength--;
410 396 columnWidth = parseInt(usableWidth / usableLength);
... ... @@ -412,7 +398,8 @@
412 398 }
413 399  
414 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 403 usableWidth -= minWidthColumns[i].minWidth;
417 404 usableLength--;
418 405 columnWidth = parseInt(usableWidth / usableLength);
... ... @@ -430,7 +417,10 @@
430 417 width = column.width;
431 418 }
432 419 else{
433   - if (column.minWidth > width){
  420 + if(column._width){
  421 + width = column._width;
  422 + }
  423 + else if (column.minWidth > width){
434 424 width = column.minWidth;
435 425 }
436 426 else if (column.maxWidth < width){
... ... @@ -445,7 +435,6 @@
445 435 }
446 436 }
447 437  
448   -
449 438 this.cloneColumns[i]._width = width;
450 439  
451 440 columnsWidth[column._index] = {
... ... @@ -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 446 this.columnsWidth = columnsWidth;
458 447 this.$nextTick(()=>{
459 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 452 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
... ... @@ -596,11 +559,43 @@
596 559 const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
597 560 const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
598 561 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
  562 + this.fixedBody();
599 563 });
600 564 } else {
601 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 +
  583 + this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
  584 +
  585 + if(this.showVerticalScrollBar){
  586 + bodyEl.classList.add(this.prefixCls +'-overflowY');
  587 + }else{
  588 + bodyEl.classList.remove(this.prefixCls +'-overflowY');
  589 + }
  590 + if(this.showHorizontalScrollBar){
  591 + bodyEl.classList.add(this.prefixCls +'-overflowX');
  592 + }else{
  593 + bodyEl.classList.remove(this.prefixCls +'-overflowX');
  594 + }
  595 + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  596 + }
  597 + },
  598 +
604 599 hideColumnFilter () {
605 600 this.cloneColumns.forEach((col) => col._filterVisible = false);
606 601 },
... ... @@ -901,7 +896,6 @@
901 896 },
902 897 mounted () {
903 898 this.handleResize();
904   - this.fixedHeader();
905 899 this.$nextTick(() => this.ready = true);
906 900  
907 901 on(window, 'resize', this.handleResize);
... ... @@ -911,7 +905,6 @@
911 905 this.$on('on-visible-change', (val) => {
912 906 if (val) {
913 907 this.handleResize();
914   - this.fixedHeader();
915 908 }
916 909 });
917 910 },
... ... @@ -951,11 +944,12 @@
951 944 },
952 945 height () {
953 946 this.handleResize();
954   - this.fixedHeader();
955 947 },
956 948 showHorizontalScrollBar () {
957 949 this.handleResize();
958   - this.fixedHeader();
  950 + },
  951 + showVerticalScrollBar () {
  952 + this.handleResize();
959 953 }
960 954 }
961 955 };
... ...