chenhaodong / mew-iview

Commit 0f983a5c5add73148e146eb4f63886dc8ab17c90

Authored by huanghong
1 parent b0794170

update table columns width compute

Showing 2 changed files with 16 additions and 13 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @0f983a5
@@ -57,8 +57,9 @@ @@ -57,8 +57,9 @@
57 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header> 57 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
58 <Content :style="{background:'#FFCF9E'}"> 58 <Content :style="{background:'#FFCF9E'}">
59 <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> --> 59 <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
60 - <br>  
61 - <Table border :columns="columns5" :data="data5"></Table> 60 + <!-- <br> -->
  61 + <!-- <Table border :columns="columns5" :data="data5"></Table> -->
  62 + <Table border :columns="columns8" height="240" :data="data7"></Table>
62 </Content> 63 </Content>
63 <Footer>sdfsdsdfsdfs</Footer> 64 <Footer>sdfsdsdfsdfs</Footer>
64 </Layout> 65 </Layout>
@@ -462,8 +463,8 @@ @@ -462,8 +463,8 @@
462 title: 'Date', 463 title: 'Date',
463 key: 'date', 464 key: 'date',
464 sortable: true, 465 sortable: true,
465 - minWidth:100,  
466 - maxWidth:200, 466 + minWidth:80,
  467 + maxWidth:150,
467 }, 468 },
468 { 469 {
469 title: 'Name', 470 title: 'Name',
@@ -474,14 +475,14 @@ @@ -474,14 +475,14 @@
474 { 475 {
475 title: 'Age', 476 title: 'Age',
476 key: 'age', 477 key: 'age',
477 - minWidth:100,  
478 - maxWidth:200, 478 + minWidth:60,
  479 + maxWidth:100,
479 }, 480 },
480 { 481 {
481 title: 'Address', 482 title: 'Address',
482 key: 'address', 483 key: 'address',
483 minWidth:200, 484 minWidth:200,
484 - maxWidth:300, 485 + //maxWidth:300,
485 } 486 }
486 ], 487 ],
487 } 488 }
src/components/table/table.vue
  Show/Hide comments   View file @0f983a5
@@ -367,6 +367,7 @@ @@ -367,6 +367,7 @@
367 367
368 368
369 let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0); 369 let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
  370 + console.log(tableWidth);
370 let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0); 371 let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
371 let usableLength = noWidthColumns.length; 372 let usableLength = noWidthColumns.length;
372 let columnWidth = 0; 373 let columnWidth = 0;
@@ -425,13 +426,13 @@ @@ -425,13 +426,13 @@
425 if (column._width) { 426 if (column._width) {
426 width = column._width; 427 width = column._width;
427 } 428 }
428 - else if (column.minWidth > width){  
429 - width = column.minWidth;  
430 - }  
431 - else if (column.maxWidth < width){  
432 - width = column.maxWidth;  
433 - }  
434 else { 429 else {
  430 + if (column.minWidth > width){
  431 + width = column.minWidth;
  432 + }
  433 + else if (column.maxWidth < width){
  434 + width = column.maxWidth;
  435 + }
435 if (usableWidth>0) { 436 if (usableWidth>0) {
436 if (usableLength > 1) { 437 if (usableLength > 1) {
437 usableLength--; 438 usableLength--;
@@ -457,6 +458,7 @@ @@ -457,6 +458,7 @@
457 } 458 }
458 //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); 459 //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
459 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); 460 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  461 + console.log(this.tableWidth);
460 this.columnsWidth = columnsWidth; 462 this.columnsWidth = columnsWidth;
461 this.fixedHeader(); 463 this.fixedHeader();
462 }, 464 },