Commit 0f983a5c5add73148e146eb4f63886dc8ab17c90
1 parent
b0794170
update table columns width compute
Showing
2 changed files
with
16 additions
and
13 deletions
Show diff stats
examples/routers/table.vue
... | ... | @@ -57,8 +57,9 @@ |
57 | 57 | <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">่ๅ</Button></Header> |
58 | 58 | <Content :style="{background:'#FFCF9E'}"> |
59 | 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 | 63 | </Content> |
63 | 64 | <Footer>sdfsdsdfsdfs</Footer> |
64 | 65 | </Layout> |
... | ... | @@ -462,8 +463,8 @@ |
462 | 463 | title: 'Date', |
463 | 464 | key: 'date', |
464 | 465 | sortable: true, |
465 | - minWidth:100, | |
466 | - maxWidth:200, | |
466 | + minWidth:80, | |
467 | + maxWidth:150, | |
467 | 468 | }, |
468 | 469 | { |
469 | 470 | title: 'Name', |
... | ... | @@ -474,14 +475,14 @@ |
474 | 475 | { |
475 | 476 | title: 'Age', |
476 | 477 | key: 'age', |
477 | - minWidth:100, | |
478 | - maxWidth:200, | |
478 | + minWidth:60, | |
479 | + maxWidth:100, | |
479 | 480 | }, |
480 | 481 | { |
481 | 482 | title: 'Address', |
482 | 483 | key: 'address', |
483 | 484 | minWidth:200, |
484 | - maxWidth:300, | |
485 | + //maxWidth:300, | |
485 | 486 | } |
486 | 487 | ], |
487 | 488 | } | ... | ... |
src/components/table/table.vue
... | ... | @@ -367,6 +367,7 @@ |
367 | 367 | |
368 | 368 | |
369 | 369 | let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0); |
370 | + console.log(tableWidth); | |
370 | 371 | let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0); |
371 | 372 | let usableLength = noWidthColumns.length; |
372 | 373 | let columnWidth = 0; |
... | ... | @@ -425,13 +426,13 @@ |
425 | 426 | if (column._width) { |
426 | 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 | 429 | else { |
430 | + if (column.minWidth > width){ | |
431 | + width = column.minWidth; | |
432 | + } | |
433 | + else if (column.maxWidth < width){ | |
434 | + width = column.maxWidth; | |
435 | + } | |
435 | 436 | if (usableWidth>0) { |
436 | 437 | if (usableLength > 1) { |
437 | 438 | usableLength--; |
... | ... | @@ -457,6 +458,7 @@ |
457 | 458 | } |
458 | 459 | //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); |
459 | 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 | 462 | this.columnsWidth = columnsWidth; |
461 | 463 | this.fixedHeader(); |
462 | 464 | }, | ... | ... |